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.

Example of bypass link on the BBC website

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.