5 simple tips to help you create more accessible websites

Iris Winter • 9th Nov 2015

The law (and it really is a law!) tells us that we are required to make “reasonable adjustments” to a website, to ensure “the information is provided in an accessible format.” But what does that mean?

The Web Content Accessibility Guidelines 2.0 define a set of rules and features, which can be used to achieve different levels of Accessibility: A, double-A (AA) and triple-A (AAA).

While single-A ensures a minimum level of accessibility, the requirements for AAA are much more onerous, such as requiring sign language interpretation for any pre-recorded audio. AA falls somewhere in between.

The WCAG runs 33 pages. This is accompanied by a 64 page guide on “How to meet WCAG” and a roughly 2 page long explanation of “Understanding criteria XY” for each bullet-point.

We’ve digested the documentation and want to share 5 simple tips that will get you well on your way to creating more accessible websites.

Before we get into it, there are some testing tools that will help you check your website against various different criteria from the WCAG list (Like WAVE).

A note of caution with these tools however: The test results could indicate that your website could meet all the criteria of AAA, while in reality, it might not even comply fully with Single-A. This can happen for a variety reasons such as parts of the website being inaccessible even to the testing tool. The tools should  therefore be used as a guideline only.

So, without further ado, here are our tips:

Strip it naked

This is what our website looks like naked (i.e. stripped of all styling):

Not very pretty, but this is basically how screen readers interpret a website. You need to ensure that all your content is visible and in the correct order when CSS and JavaSript are removed.
If the structure of your website does not match the visual representation, it won’t make sense to keyboard-only users and screen readers.

Tab tab tab

Keyboard-only users will use the tab key on their keyboard to navigate through the links on your site. A square outline around the link tells them where they are.This is the default setting in all major browsers so nothing to worry about usually. However, this outline is often considered unsightly and therefore removed to fit in with the design goals of the website. This leaves users with no indication of which link is currently selected.

For the more technical amongst us, there is a little trick to satisfy both: Remove the focus style with JavaScript on click only.

Meaningful links

Imagine you are using a screen reader and using your keyboard to tab through the links on a blog overview page: “Read more”, “Read more”, “Read more”, “Read more”. Links like this provide no context to users of screen readers.

One way to address this issue is to add extra descriptions to the links that only screen readers will see. It is really easy to implement  and you can use it not only for links, but also for any other additional content that you might want to present to screen readers only, for example if an image is used to represent content.

SPARE THE CAPITALS

This is something I never thought about until I came across Gian Wild’s article on accessible links. Some screen readers will spell out words written in capital case letter by letter. But this is good tip even for normal visitors: capital letters are very similar in shape and size and therefore harder to read.

Don’t be a control freak

Today the different ways we use to visually represent content are virtually endless: animations, sliders/carousels, accordions or tabs are commonly used to enhance the user experience. It is our job as developers to ensure we don’t take away the control from the user. This really applies to any user, as we have no way of predicting for what reasons a person visits our site, under what circumstances it is viewed, or what they intend to do.

A good example is the content slider: We don’t know how much time a user needs to read a slide or indeed which slide might be of interest to them. Therefore sliders should always have navigation controls and if they are auto rotating, there should be a way to pause the rotation (pausing when the mouse is over the slide is generally acceptable).

—

They say to really understand someone, you should walk a mile in their boots. Users of screen readers are probably the most challenging group to cater to, so I can only urge you to try using a screen reader yourself. A free screen reader for Windows can be found here: http://www.nvaccess.org. Macs have a built in screen reader that can be started pressing Command+F5. Try and navigate through a website, do your online banking or update your Facebook status while blindfolded.

It doesn’t take much effort to make your website more accessible, which will benefit all your visitors.