You want to be accessible friendly but don’t know where to start? Here a small selection of guidelines and good links to help you make your first steps into web accessibility.
The objectives are to make the navigation easier, write semantical and valid HTML and follow the Wai-ARIA specifications. There is obviously a lot more to talk about, but that’s already a good start.
1. Make the navigation easier
Add Bypass links
Add “bypass links” (also known as “skip navigation links”) and target the key parts of your website: main content, searchbar, navigation and/or other important sections.
Bypass links must be the first set of links in any page.
Note: the main purpose is to skip the navigation, not to create a new one. Don’t go overboard and stick to 1 to 4 bypass links at most.
Be Keyboard friendly
Make each page keyboard friendly. All elements that trigger an action must be able to get focus : add the tabindex attribute with a value to 0 or -1 if necessary.
Be especially aware of complex components as sliders, tabpanels, video players, etc.
A simple test for checking if there is no trap in your page is to temporarily ditch your mouse, refresh your browser and try to reach the bottom of your page with only your keyboard. To pass the test, you must be able to access to any component or functionality without being stuck.
And if, at some point, you get lost and can’t tell which element is selected, the next rule is for you!
Make the focus visible
Focus must be visible. CSS property outline should not be set to 0 or none. If you insist to clear the outlines, make sure you graphically highlight every focused state with the help of the :focus pseudo-class.
This will help your user to position himself in your website. It is essential for some keyboard users who rely exclusively on that graphic hint.
Prefer native components
Prefer native components to custom ones. Especially for form components.
The advantage of native components is that they are directly handled by the browser. This gives users a better uniformity while switching from a website to another: they won’t need to learn how to use your components as their behaviors are already familiar. And, most of the time, native components are naturally compatible with assistive technology tools.
When that’s not possible, make sure all custom and external UIs are accessible and do implement the WAI-ARIA API. This will help to come closer to native components.
Same goes for third-party libs, choose in priority libraries that are accessible friendly or that offer some kind of fallback.
2. Write semantic HTML
Draw a logical heading tree
The heading tree structure must be correctly defined. Many screen-reader users browse the web from heading to heading.
Do not skip a level and do not forget to indicate the main title with element h1.
It is worth mentioning that HTML5 complexifies things a bit. It is now possible to indicate several h1 in a same page. And thanks to the outline algorithm, headings are relatively linked to their sectioning elements, no matter what level they are.
Browser extension like “HeadingsMap” will help you to clear things up.
Create a coherent page structure
Use HTML5 sectioning elements main, nav, article, section, header, footer, aside, etc. to achieve a logical and coherent structure.
Do not misuse HTML elements
HTML5 counts more than 100 html elements. This give us plenty of choice to describe (almost) any content. So choose properly and do not misuse them.
Here 2 bad practices to avoid :
- Do not use the
aelement to trigger an action. Prefer thebuttonelement with the appropriate type (button, submit, reset). Theatag should be reserved for navigation purpose.
<!-- avoid using "a" for non-navigation's action-->
<a href=”#”>Unfold menu</a><!-- use "button" instead -->
<button type=”button”>Unfold menu</button>
- Do not use
spananddivto directly display text. They are non-semantical dividers and help structuring and styling the page. Prefer any other semantical tag:p,blockquote,ul,ol,hn, etc.
<-- avoid using "div/span" to wrap text -->
<div>Save with <span>Ctrl</span> + <span>S</span>.</div><!-- use appropriate tags-->
<p>Save with <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
Add useful information and text alternatives
Images
Use alt attribute and fill it with a short description if the image carry information. Leave it empty for decorative images.
Use the figure element to group an image with its associated legend.
Uselongdesc attribute and associate a text file to give a detailed description of an image. Essential for charts and infographics!
Form
Uselegend element to describe any form groups declared with the fieldset element.
Tables
Usecaption element to sum up the content of complex tables.
Videos and Audios
Do not forget to add subtitles, audio-descriptions and text-transcriptions to your audios and videos accordingly.
At the very least, if a video or audio hold any meaningful information, propose a short textual sum-up.
All
Only when necessary, use the title attribute to any element to add additive information.
/!\ Use this attribute with care to avoid overwhelming your user!
Announce a change in language
Any language switch must be announced with the adequate attributes:
dirattribute if the language is written in the opposite direction (ie. when adding a text in Arabic or Hebrew)langattribute to specify which language is used
3. Follow WAI-ARIA specifications
The “Web Accessibility Initiative — Accessible Rich Internet Application” specification, most commonly known as WAI-ARIA or simply ARIA, allows you to improve the accessibility of a webpage.
ARIA helps to add semantics and to properly describe components:
- use
roleattributes to add semantic - use
aria-label, aria-labelledby, aria-describedbyattributes to add more information - follow design patterns to describe any components
Although the API is still not entirely supported by modern web-browsers and assistive technologies, it is important to prepare your website and think “forward compatibility”.
4. Write valid code
Last but not least, your HTML code must be valid. Use the W3C validator to check any break in the source code.
