Four accessibility wins

Accessibility is quite hard to do after the fact. You've already built your thing, it's amazing. But it's not very accessible. You don't have time for a whole sprint of accessibility work (a topic for another post...) but you wan't to improve something.

Here are four things you can focus on to work towards a more usable application.

Note: I used tota11y to find the following bugs. It's a great tool and I use it every day to do quick checks to make sure the thing I am building is still accessible. Try it out!

All quotes below are from the WCAG Accessibility Guidelines.


2.4.6: Headings and labels describe topic or purpose.

2.4.10: Section headings are used to organize the content.

Headings are awesome. They tell you where you are and the purpose of the section you are reading. Sometimes you'll have a contents page you can click to take you to the heading you're most interested in.

Other times, you might be using a screenreader and relying on headings to navigate. Ensuring our page has a good consecutive heading structure will make it easier for those screenreaders to get to where they need to go. Even more, correct use of heading tags gets us nice valid HTML.

There are six heading types, H1 to H6. Headings are use for structure, not styling. I repeat, CSS is for styling, HTML headings are for structure! If you have an H1, the heading that follows it should be an H2. An H5 follows an H4.

In the above image, we can see a couple of errors. The first heading on the Car Insurance homepage is an H2. Not only is this incorrect for HTML and accessibility purposes, but SEO puts a lot of weight on having a top H1 heading on the page. The second error, is that we have some non-consecutive heading use. An H4 should not be following an H2.

Take each page on your site at a time, use tota11y to visualise your heading structure and make sure they follow a sensible order. Start with an H1 and then work your way down.

Colour Contrast

1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1 (AA)

1.4.6 Contrast (Enhanced): The visual presentation of text and images of text has a contrast ratio of at least 7:1 (AAA)

Making sure our elements are well contrasted means there is a much better chance of our things being perceived. When something is badly contrasted it means that the main element (often the text) is not visible against its background. For example, most people will not see light grey text on a white background.

To reach AA accessibility standards, elements should meet a contrast ratio of 4.5:1. For AAA standards, it is 7:1.

In the image above, we can see that the "Sign In" link on (at the time of taking the screenshot) is not accessible. It failed to meet AA contrast guidelines, as it's contrast ratio is only 3.44:1. These means it might be hard to spot and thus people don't know that they can sign into their uSwitch account.

tota11y offers some useful suggestions on what colours would work for a better contrast ratio. But, if your contrast issues are large-scale it's better to sit down with your design colleagues and work out long-term fixes.

Form labels

3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)

All form inputs should be labelled. It's not good enough to just add "Insert name here" above a form field. We need to make sure the label is linked to the input.

<label for='name'>Name</label>  
<input id='name' type='text'>  

We link the label to it's relevant input so we can:

  1. Click the label to focus the input
  2. Have the label read out to us when tabbing to the input and using a screenreader.

Every input should have a label. If you need a name to be entered don't have three fields for first, middle and last name and only give it a single label of "Name".

Wherever possible, make sure the label is visible. We can't rely on placeholders, not only do some screenreaders not support them but when I click on an input the placeholder disappears and without a label I can forget what I was supposed to be entering!

Alternative Text

1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose

If you have an image on your site that conveys useful information, it should have alternative text. Folk using screenreaders will have the alternative text of the image read out to them. You might display an image of a graph and the alt text for that image could be "The more sales we make, the higher our profits". No need to put "an image of" or "a graph showing". That isn't useful information.

If the image conveys no information it should have an alternative text, and it should be blank. This is so the screenreader can skip over it. A decorative flower banner provides nothing relevant, so is a good use case for blank alt-text. The images in this blog post all have blank alternative texts, because where the image is useful I explain what the image shows in the text below.

All videos should have captions. All audio should have transcriptions. We are capable of providing information in a myriad of ways, and should, so we can be accessible to as many people as possible.

Accessibility is a large topic, and takes a lot of work. These small wins can start to provide a much better experience, for everyone.