5 Tips to Make Your Website More Accessible
Accessibility, over the years, is becoming more important with good reason. With technology becoming easier to get a hold of, many types of people can now flock to your website. Having a friend who is visually impaired, I’ve observed first-hand how difficult some websites can be to navigate or use.
I have compiled simple tips that can make your website more accessible without compromising your design.
Colour Contrast
W3C suggests a minimum of 3.5:1 colour contrast for dark backgrounds and 4:1 for light backgrounds.
Checking colour contrast:
1. https://contrastchecker.com/
2. https://webaim.org/resources/contrastchecker/
ALT Text for Images
It should already be best practice to use the alt attribute when using images on the web. Not only is alt text used for SEO but screen readers also take them into account.
<!-- Bad alt Text -->
<img src="http://placekitten.com/200/300" alt="A picture" /><!-- Good alt Text -->
<img src="http://placekitten.com/200/300" alt="A picture of a tabby cat playing in the snow" />
Tab Index
Tab index is the order that your browser will go through the elements when you press tab on the keyboard. There’s a natural order that the browser follows (based on your HTML structure) but it only takes into account actionable elements (ie. form inputs, buttons, links, etc.) and not structural elements (ie. div, p, span, etc.).
HTML has an attribute called tabindex where you can set the tab order you want for your page. As an added bonus, putting tabindex in elements that aren’t usually tab-able will receive the tab functionality.
<form>
<input tabindex="1" placeholder="John Doe" />
<input tabindex="2" type="tel" placeholder="(xxx) xxx-xxxx" />
<div tabindex="3">
<p>This div will be tabbable</p>
</div>
<div><p>This won't be</p></div>
<input type="submit" />
</form>Roles
The role attribute exists in HTML to give elements their purpose if used differently. If you’re using a div as a button, you can add the role attribute to tell the browser or screen reader that the div’s purpose is to be a button.
Common role values you can use include:
- list
- listitem
- button
- link
<!-- Will be considered as a link -->
<button role="link" /><!-- Will be considered as a button -->
<a role="button" /><!-- Will be a list -->
<div role="list">
<div role="listitem">Item 1</div>
<div role="listitem">Item 2</div>
</div>
List of available roles:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques
Semantic Tags
Ever since HTML5, semantic tags have been available to use. The purpose of these tags are to give context to the tags you use in your website.
The tags also provide context for your users when they use screen readers. Compared to roles, screen readers understand that certain tags found in your website.
Some common semantic tags:
1. header
2. nav
3. footer
4. main
5. ul and ol
Resources for semantic tags:
1. http://web-accessibility.carnegiemuseums.org/foundations/semantic/
2. https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML
Bonus Tip!
If you’re going to show text on your website as all-caps, write it as regular case and use CSS to make it all capitals. Screen readers will consider your text as individual letters if it’s typed as all capitals.
<style>
.all-caps {
text-transform: uppercase;
}
</style><p class="all-caps">All uppercase</p>
