November 08, 2019Albéric Trancart13 min read
Web accessibility (a11y) can be a little disorienting for everyday developers. Here is a practical, down-to-earth guide with examples to help you make your websites more inclusive and comply with legislation.
There are three main reasons why you should make your apps and websites more accessible:
The RGAA is the French government's official guide to improving accessibility. It features a verification method, tests, and checks to enforce both the WCAG 2.1 AA standard and the EN 301 549 V2.1.2 norm.
You can download it here (link in french): Référentiel général d'amélioration de l'accessibilité.
However, it is not so easy to digest - there are 13 categories of criteria across 120 pages. Let's break it down category by category to get the essential information.
I recommend that you audit one of your web pages while reading this article to put it to practice. I made a nice printable a11y checklist for you to follow along. You also may want the HTML tags reference page opened in another tab. That will come in handy for understanding the role of HTML tags you may not know or improve your knowledge of the ones you already know.
Disclaimer: following these rules will not guarantee that your site is 100% accessible. It will not replace real user tests. It will make your site easier to navigate for everyone, though.
Warning: checking each category changes a lot from page to page and can take some time.
People using screen-readers should be able to understand the content without the visual information provided by the images.
<img>tags must have an
<object>and tags with
role="img"must have a
aria-hidden="true"for other tags.
Bad example: this image has a wrong
alt attribute, it is not relevant to the image
Bad example: this image should have
Bad example: this svg should be
Good colors and contrast are especially important for color-blind people, people with vision conditions such as myopia or simply all users over the age of 40.
Choose colors with a high enough contrast
Good example: Falco is OK for color contrast
Here is an article on how Stripe chose its color palette to meet these criteria.
A well structured content is easier to understand, especially for people with screen readers.
langattribute is set on the html element
<hx>structure is relevant (do not skip heading levels)
<aside>elements when relevant
<blockquote>for long quotes and
<q>for short quotes
titleattribute describing its content
For screen-reading, you can use VoiceOver on macOS or this Google Chrome extension if you prefer Linux like me.
To validate your HTML, you can enter your URL or copy-paste the generated HTML into the official validator.
Bad example: the text given by the screen reader is difficult to understand, and it's even worse when it's read aloud
Aging people often use zooming features,
The website is still usable if:
font-sizeto 200% or use the browser zoom to 200%
A quick code snippet you can paste into the devtools in the
<html> element to check text resizing:
font-size: 200%; line-height: 1.5rem !important; letter-spacing: 0.12rem !important; word-spacing: 0.16rem !important;
Bad example: the layout is broken...
Keyboard navigation is important for users with motor disabilities, people having tremors, blind users but also power users of the website.
display: noneor set a
Bad example: the outline is disabled on this link
Good example: you can steal GitHub's "Skip to content" link. Hidden by default but it's the first focusable element and it appears if you Tab into it.
Media often convey a lot of information that can't be accessed with visual or auditive conditions.
<video>players, no other technologies such as flash
<track kind="captions">to both audio and video content (don't forget user-uploaded content!)
Bad examples: both Falco and SpaceX Stats are using charts with no tabular alternative. Here are some examples of accessible charts with Highcharts
My opinion: providing text alternatives to complex media such as videos and charts is clearly the hardest criteria to meet. My personal strategy would be to limit the usage of such media and to have a text with a similar level of information in descriptions labeled with
aria-describedby. When having user-uploaded content, you should encourage your users to provide a long description too. However, when these media are the main focus of the website (such as YouTube or TED), you can't escape the need for captions.
A well-structured table is important for screen readers, as a badly structured one can become really confusing.
<table>is used to display tabular data and only tabular data
<th>row and/or column headers
<th>elements or by linking
Bad example: this table is missing a caption and could use row headings on the mission names
Forms are sometimes complex to understand and to navigate, and it is even worse for people with screen readers or using keyboard navigation.
<fieldset>tags (example: radios, checkboxes)
<select>component (no custom selects!) or ARIA comboboxes.
autofocusattribute on inputs. Screen-readers jump straight into the input without any context about the form. The only valid way to use it is when it doesn't disrupt navigation: for instance, Google's search input on the landing page has it (because it is the only thing in the page) but not the one on the results page (which has way more content).
autocompleteattribute configured. Read the docs on MDN about autocomplete.
Bad example: radio buttons should be placed inside a
<fieldset> with a
<legend> and radio inputs are not linked to their labels.
You can turn off animations if the user has opted-out of them with the
Bad example: SpaceX Stats has countdowns, which update the text every second. Such a time-dependent content should use the ARIA
Bad example: this funny website to test your HTML knowledge is not accessible at all because many people will not be able to take the test in 112 seconds. One way to improve this would be to provide different levels of difficulty, the easiest being "no time limit".
I hope that this article helped you audit your website and understand what should be improved to make it more accessible. For me, it was a wake-up call that I needed to re-learn some of the web basics (such as proper HTML semantics). The web is transforming our society, its inclusiveness should be a default and not a bonus.
CSS fan, space enthousiast and more