Insights The importance of accessibility

Accessibility plays a key role in the creation and use of websites - the importance of which has been put into law as of 2018; the rules come from the W3C (World Wide Web Consortium) called WCAG (Web Content Accessibility Guidelines). This set of guidelines has three levels of compliance: A, AA and AAA (not to be confused with batteries).

The UK government requires AA compliance for all public-facing company websites, though it’s also good to have it on a B2B company website as well so you don’t prevent users from navigating your website.

WCAG has been around for nearly 20 years and powers a lot of accessibility tools like voice over assists and basic website functionality. But with its latest version being published in the last few years as of writing (the latest working draft of version 2.2 was released 11th Aug 2020 (2)), the importance of accessibility is becoming more prevalent in the minds of developers as more tools and ways of testing accessibility are being developed.

WCAG is broken down into four major principles which make up the main types of struggles for users trying to navigate a website. The four principles are:

Perceivable

It’s important for users to be able to perceive the content on your website. There’s a variety of reasons why someone might struggle, such as being colour-blind, partially-sighted or having to rely on voice assistants. Perceivable guidelines cover off these issues in a variety of ways, but also rely on other principles – for example, having a website that is understandable by a voice assistant is important.

Operable

All user interfaces must be operable by users in some fashion; it might not be exactly the same experience, but having an alternative way of navigating an interface is important. An example with which people can struggle is the interaction based on hovering your mouse cursor on the screen. If you only have a keyboard to navigate the site, you can’t interact with this interface, so a different option is needed.

Understandable

Users need to be able to interact with the website with ease; hiding content behind complex interfaces or arbitrary symbols can hinder how users navigate around the site. Making sure that assistive technology can understand your website is just as important, for instance having a voice over assistant constantly repeat counter-intuitive or repetitive information can negatively impact a user’s ability to understand your site.

Robust

The content should be robust enough that a variety of different assistive technologies can read and understand the content, while still remaining accessible to others who don’t have such tools.  In each principle there are a number of recommendations denoted with levels A, AA, AAA. These levels represent a degree of conformity; the lower levels show the most necessary items to follow, such as being able to navigate the website via keyboard in some way, while AAA is for full compliance, ensuring that any type of user can access your website.

Colour contrast is one of the first rules that most people might come to; this is in place for those who are partial of sight or colour-blind. Making sure there is a certain level of contrast between colours allows users to discern text and different parts of the website a lot more easily even if they can’t see the exact colours. There are two levels of contrast in the guidelines, one is for more common forms of partial sightedness and colour-blindness, while AAA requires a higher level of contrast for more rare forms of colour-blindness; other guidelines can help those with even worse eyesight.

One thing we can’t rely on is that everybody can use a mouse; people who suffer from poor motor skills or are unable to see the mouse cursor will instead use the keyboard using tab and other third party assistive tools to navigate a website. This means that certain interaction states need alternatives to be built in; for instance the hover state can only be activated using a mouse, so you need to think about what will happen when a keyboard user tabs onto this same interface and how they can interact with it.

Some people who navigate around a website using a keyboard only are not necessarily blind or partially-sighted, so we need to be able to show the current location on which users are tabbed. In the browser this is known as the focus state, highlighting the current item a user is focused on, and tabbing will move the focus around the site. We need to make sure that the visual for the focus state is clear for users to be able to understand where they are on the website – it has commonly been relying on the same visuals as the hover states, but this can lead to confusion. Having a specific and consistent focus state makes it a lot easier for the user to understand where they are currently and where they are navigating to on a site.

For people using the keyboard as their main form of interaction, we need to think about the structure of the website. The order of elements needs to make sense with what you see in front of you, and the hierarchy of content needs to make sense, too. Voice assistants will interpret the website and read out relevant information, but this can lead to confusion if what is read out goes against the structure of the content, which can often be the case.

There is also the issue of repetitive content when navigating a website via keyboard only, as you always start at the top. The user would therefore need to tab through the navigation of the website or a potentially long interface like a slider of images (which might not be too relevant to the user). Adding in ways to skip content for keyboard users is therefore very important so they can get to the content they want more quickly.

Just as the principles can relate to each other, the guidelines do the same, each relying on or reinforcing each other to make the site more user-friendly and accessible. For instance, making sure a website is keyboard-accessible, but not having very clear signals on what is focused on and what isn’t, makes all the effort on making the website keyboard accessible a lot less effective. Having an understanding of how all these ideas come together and make up the whole will lead to a more effective accessible website, while also enabling you to create better websites going forward and understand how to fix older ones.

[1] https://www.gov.uk/service-manual/helping-people-to-use-your-service/understanding-wcag

[2] https://www.w3.org/TR/WCAG22/

[3]https://www.w3.org/WAI/WCAG21/Understanding/intro#understanding-the-four-principles-of-accessibility

[4] https://www.w3.org/WAI/WCAG21/quickref/