Accessibility basic rules and tools

Accessibility is a vast, very hard to navigate maze that even people like me who worked on it almost two years can't properly handle correctly. So I don't expect myself to be able to explain everything, and I don't expect you to think about everything.

In this page I will simply list the essential rules I had to enforce myself and that will help you get started. Later, you can dig a bit more by yourself to fix your own specific problems.

How screen readers users use them?

Most people don't know it, but screen readers users don't only use the tab key to navigate in pages!

What does that means? That means don't panic when you start tabbing everywhere and see the focus not stopping where you want! When I first started I thought accessibility was all about adding the tab-index="0" HTML attribute to almost every element because otherwise, the tab key would not stop on it. But that's not how that works!

Screen readers users will use a combination of arrows to read phrases or letters, shortcuts to access titles and other parts of the website, as well as the tab key, but only to get out of input element in forms or access links and buttons! Like any other users with experience using a tool, they probably use it in a way that is totally foreign to you!

That's why it's important to have your website tested by actually disabled people. Don't assume how disabled people use the web, ask them to guide you if you can. You will probably be surprised at how fast screen readers users can navigate a page.

The basic rules

Here are some basic but essential rules to help you get started:

Don't block the ability to zoom in or zoom out on your website.
Don't go below 13 pixels in font size. Yes users can zoom, but that would be way more comfortable if they didn't have to do it in the first place!
The basic 16px font size that all browsers have is often a good thing to follow.
Don't use super thin fonts. They are pretty but very hard to read!
Don't overdo it with animations, flashes and stuff that can trigger stress.
If your website is not compatible with reader mode, try providing an accessibility menu allowing the change of colors and fonts.
Take care about color contrasts, you need a ratio of 4.5:1 to be sure most people can read your texts.
Don't indicate states on your website or application by only using colors (like green and red) as colorblind people can't distinguish them (that's the reason traffic lights don't do it!)
Try not using icons alone, especially when for ultra specific things that don't make sense on their own. Add text to indicate what it is.
Don't put crucial information inside images, even if you add an alt attribute!
Ensure keyboard focus is visible and clear. Most of the time, it means not disabling the focus styles in CSS.
Provide a Skip to Content link at the top of your website.
If you have audio content, provide a transcript.
If you have video content, provide subtitles.

How to hide text destined to screen readers users

You can use this CSS class:

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

But don't overdo it, it must be the exception, not the rule. Some screen readers users can actually see but prefer a combination of voice and text. If you start hiding walls of text the user can't see, you're gonna create a very unpleasant experience.

How to hide things from screen readers

Use the aria-hidden="true" attribute on the HTML element of your choice. Again, the exception, not the rule. Use it if something can't be vocalize, but provide a textual explanation of it right after.

What is a skip content link?

Screen readers users have shortcuts to access the different parts of your website, but that doesn't mean you can't give them your own shortcuts. Escape or skip links are an invisible menu of anchor links to different parts of your page, that you can add right after the <body>.

It's not technically complicated to implement and can save your screen readers users tons of time, especially if you have big and complex header or navigation before the main content.

What tools can I use?

One of the most used combinations of screen readers and browser are NVDA and Firefox. But you can also use the Chromevox extension for Chrome to get an in-browser screen reader. Most operating systems also provide voice over and from what I heard, the one on iOS is particularly good.

In Firefox Dev Tools, the "Accessibility" tab will show you a textual representation of your website nodes that can help you detect what will be vocalized and won't. There is a lot of browser extensions for accessibility that will scan the current page and tell you what is violation the rules.

I've used the Axe extension in the past and enjoyed it, but there's a lot more.

How does the reader mode works?

All modern browsers provide a reader mode that strips most of the design to keep only text and images. They also allow changing fonts, background colors, text to speech and other features.

The problem is... it's not clear how and why some pages allow the reader mode to exist and others don't. According to this article analyzing a standalone version of Firefox reader mode, an algorithm analyzes the content inside <p> elements, checks how content-y they are and assigns them a score. Commas, length of phrases and other parameters are taken into account to score the page and decide if yes or no, it deserves reader mode.

It means that small pages are not going to offer reader mode, which is a shame. But you probably can't do anything about it outside reorganizing content.

Next: The basics: head, div and span

Initially published: November 23rd, 2020
Generated: November 12th, 2021