The role of UX design in web accessibility.
Since the passing of the Equal Treatment Act on May 17th, 2019 it is mandatory for websites to be accessible to everyone, regardless of any possible disabilities. Worldwide, it is estimated that about 15% of the population lives with a form of disability, that’s roughly one billion people. In a world where Domino’s Pizza got sent to the supreme court regarding an accessibility issue on their website and where you could get fined up to 250,000$ if you don’t make your app accessible to all, the importance of making web content accessible speaks for itself, but which role do we play in all of this?
“Form follows function”
- Louis Sullivan
As a designer, it is your job to make websites look good, but more importantly, to make them as easy to use as possible. More precisely, as a UX designer, you are the user’s voice and it is your responsibility to advocate for their needs. Accessibility is not only the designer’s responsibility, but we play a major role in making it possible.
Where to start?
We should start by taking a look at the most common categories of impairment and figure out how we can make their experience as a user as good as possible.
- Visual Impairment: This includes a partial or total inability to see or to perceive colour contrasts.
- Hearing Impairment: Some users have a reduced ability to hear.
- Motor Skills/Physical Disabilities: Users may have difficulty moving parts of their bodies, including making precise movements (such as when using a mouse).
- Photosensitive Seizures: Conditions such as epilepsy can cause seizures that are often triggered by flashing lights.
- Cognitive Disabilities: There are also many conditions that affect cognitive ability, such as autism and dyslexia.
Luckily, we have the Web Content Accessibility Guidelines to our disposition which offers elaborate guidelines subdivided into three different levels. You don’t have to sacrifice the looks of your app in order to respect accessibility guidelines.
Colours and contrast
Colours can help you a lot in building an intuitive website. A good understanding of colours can make your website stand out but it can also help to make it more accessible. There are a lot of studies made on the effects colours can have on our psyche. Colours are good, but not everyone can benefit from them. Colourblind people wouldn’t be able to navigate a page that only works with colour codes, that is why you also need contrast. Contrast is the difference in luminance between two adjacent colours or overlaid colours. People who have impaired vision such as colourblindness may have difficulty discerning colours of low-contrast values. Contrast improves the visibility of elements for people who have difficulty seeing colours (or can’t).
“All colours are the friends of their neighbours and the lovers of their opposites.”
— Marc Chagall
According to the WCAG, you should be keeping a minimum contrast ratio of 4.5 to 1, unless your font is at least of size 24px, then it drops to 3 to 1. Thankfully, nowadays a lot of tools are at our disposition to check if our colours are deemed accessible, such as Web Accessibility In Mind or ColorSafe.
Keyboard-friendly
A lot of assistive technologies rely on keyboard-only controls, which makes keyboard accessibility one of the most important aspects of web accessibility. As such, it must be possible for users to navigate all of your site’s features using only a keyboard. The typical way to navigate with a keyboard is by pressing the Tab ↹ key which outlines elements on the page. You should avoid setting outline: 0 or outline: none , it is better practice to instead change the outline to match the design of your page. Be careful if you are using a CSS reset as some of them have :focus {outline: 0} as default. Here is an extensive guide on good practices regarding keyboard navigation.
HTML semantics
Working while keeping accessibility in mind from the start can save you a lot of work and frustration. A lot of screen readers for the visually impaired work with your HTML flow so it’s important to keep it consistent and semantically correct. First of all, you need to make sure to set the document language.
<html lang="en"> <!-- This document's language is set to English -->Sometimes, you might have an expression in a different language within a block of text that could lead screen readers to pronounce it in a non-correct way. For that matter, it is possible to use a<span> tag inline to specify that a certain passage is in a different language.
<span lang="fr">“C’est la vie,”</span> Harold sighed, as he watched his Volvo tumble off the cliff.It is important to always use the appropriate HTML tags for the elements on your page, keep in mind that <div> has no semantic value. There is a vast selection of different elements to choose from which are more assertive.
Alt text
When placing an image on a web page, you can enter alternative text inside the <img> tag that screen readers will detect and read to visually impaired users.
Structure
Keep a good structure in your document by using headers and appropriate paragraph sizes to make your content easier to understand and improve flow.
For instance, you should only use one H1 per page — usually as the page title. This can be followed by subheadings starting with H2, which can then be nested further with H3, followed by H4. These should always be used in order so you should avoid using an H4 directly after an H2 (and so on).
Forms
It is fairly common to see forms without any label to indicate what is the purpose of the field. Often, instead of a label, people make use of the placeholder, which is, more often than not of lower contrast than our required 4.5 to 1 ratio. Another problem with placeholders is that once the form is focused, the placeholder disappears. If a user is navigating using only a keyboard and they want to reach a form that is not currently displayed on the viewport, the placeholder text will disappear before they can see what they are intended to input. Here are some rules on the best practices surrounding forms.
Adding all these constraints to your production will certainly be more challenging, but it will also force you to reflect more, push further the limits of your creativity and bring you closer to the experience that real users might face when using your app. After all, constraints are what design is all about.