HTML quick-start guide for an accessible website

Sawsan

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.


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 a element to trigger an action. Prefer the button element with the appropriate type ( button, submit, reset). The a tag 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 span and div to 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:

  • dir attribute if the language is written in the opposite direction (ie. when adding a text in Arabic or Hebrew)
  • lang attribute to specify which language is used
Effect of lang attribute values on JAWS speech

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 role attributes to add semantic
  • use aria-label, aria-labelledby, aria-describedby attributes 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.


Thank you for reading. I hope this post will help you start your journey towards web accessibility.

You can find me on Twitter and Codepen!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade