Where to start when testing your website for accessibility
Making sure your website conforms to accessibility standards is vital in ensuring that your website is open to the widest possible online audience. There are over 11 million people in the UK with a limiting long term illness, impairment or disability. Whilst not all disabilities make it difficult for people to use the web, we should design and build our websites towards the aim of being inclusive for all, with zero barriers to entry.
We discussed the importance of accessibility with Matt Roberts, Lead Digital Designer and User Experience Manager at Sightsavers. Sightsavers is a non-governmental organisation (NGO) that prevents avoidable blindness and promotes equality for people with disabilities. Sightsavers also run a Perspectives initiative which houses articles, blogs and tips to help people understand and implement approaches to communicating to a broader audience.
Matt focuses on accessible and inclusive design, for which he is a keen advocate.
Some website accessibility issues are more apparent – and common – than others. Below, we highlight a handful of common issues and discuss the ways we can fix them in order to make our website as inclusive as possible.
Some users navigate websites using their keyboard instead of, or in addition to, using their mouse. Consider the following user goals and how they can be achieved using the keyboard (often with the tab key, arrow keys, as well as other learned shortcuts): accessing a link, navigating to a different page using mega menu navigation, playing and pausing a video, or expanding hidden content.
Keyboard users need to be able to see where their keyboard focus is so they can ensure they’re interacting with the intended content. Browsers provide a focus style by default, but some websites choose to disable these and forget to add their own custom styles.
In the below screenshot, imagine a user trying to access the ‘Experience Workshop’ link by pressing their tab key. In this example, focus styles for accessibility have been removed from the website so the user is unable to see where they’re navigating.
The above problem can be prevented either by enabling focus styles in CSS – for links, buttons, and anything else you can interact with – or by setting your own custom styles. In the screenshot below, we’ve enabled focus styles and the user can now see which links and clickable content they can interact with when navigating with their keyboard. Upon pressing the enter key, the user will be taken to the ‘Experience Workshop’ page.
Website features that convey their message by use of colour can cause difficulty for colourblind users. Statistics from Colour Blind Awareness indicate that colour blindness affects 8% of males and 0.5% of females globally, so it’s important to design inclusively.
Usually, website error messages are communicated through use of the colour red, and success messages with green. Users with red-blind or green-blind protanopia are unable to see the use of red or green and, as a result, they are unable to identify the message as an error or success message without reading the text.
The interface could be improved for all users by adding an icon that communicates an error, in addition to the background colour:
For more examples of problematic interfaces for colour blind users, read this article by Econsultancy: Considering colour blindness in UX design.
Low contrast colour combinations can be problematic for users with vision problems or colour blindness.
The Web Content Accessibility Guidelines (a shared standard for web content accessibility) defines a set of rules to ensure that colours are used responsibly and with enough contrast to be ‘read by people with moderately low vision’.
Let’s say we want to create a custom blue text for links. The screenshot below, created using the WebAIM contrast checker, shows an example of a link with poor colour contrast that fails WCAG guidelines. At a minimum, we should aim to conform to WCAG AA standards, with AAA (the highest conformance level) being the ideal target.
We can improve the colour contrast so that it passes WCAG standards by darkening the text: