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.
WebAIM: "Skip Navigation" Links
Of course, sighted people who use their mouse do not have any trouble with pages such as this. They can almost…
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
-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!
WebAIM: Keyboard Accessibility - Tabindex
You are here: Home > Articles > Keyboard Accessibility > Page 2: Tabindex
Make the focus visible
Focus must be visible. CSS property
outline should not be set to
none. If you insist to clear the outlines, make sure you graphically highlight every focused state with the help of the
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.
CSS outline property - outline: none and outline: 0
The CSS outline property is an accessibility requirement, yet often abused by many web designers, why do they do it?
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
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.
Does illogical or non-sequential heading structure fail WCAG 2.0?
Accessibility professionals and people with disabilities have argued for years about the actual benefits of having a…
Create a coherent page structure
Use HTML5 sectioning elements
main, nav, article, section, header, footer, aside, etc. to achieve a logical and coherent structure.
How to Use The HTML5 Sectioning Elements - Treehouse Blog
HTML5 has seen the introduction of a number of sectioning elements that can be used to mark up your web pages. Using…
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 the
buttonelement with the appropriate type (
button, submit, reset). The
atag 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
divto directly display text. They are non-semantical dividers and help structuring and styling the page. Prefer any other semantical tag:
<-- 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
alt attribute and fill it with a short description if the image carry information. Leave it empty for decorative images.
figure element to group an image with its associated legend.
longdesc attribute and associate a text file to give a detailed description of an image. Essential for charts and infographics!
legend element to describe any form groups declared with the
caption 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.
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:
roleattributes to add semantic
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.