UX Playbook

Accessibility

Related concepts: Inclusive Design, Universal Design

Accessibility of a digital product revolves around making a product usable, or ‘accessible’ for as many people as possible, including those with a (situational) impairment. By taking into account users with impairments from the very start of your design process, you ensure your product works for a much larger group. We call this inclusive design. It also prevents accessibility becomes an afterthought or worse; a separate product for specific target groups. Moreover, an accessible product always leads to improved usability overall, something every user experience should strive for.

From 2025, or even earlier, the [European accessibility act](https://ec.europa.eu/social/main.jsp?catId=1202) will require some types of products to be accessible by law.

General: WCAG

The Web Content Accessibility Guidelines (WCAG) are often used guidelines for web/digital accessibility. It’s good to know there are three levels and four principles. It’s also a versioned set of guidelines which is updated once in a while, the 2.2 version is to be published somewhere around 2023.

Levels

The WCAG has three levels of conformance:

Principles

All guidelines fall under their four principles; things should be...

Things to consider

Colour

Smart use of colour can aid the usability of an application. High colour contrast generally improves accessibility for users with poor sight. For example: Ensure text has enough contrast with its background (use tools like Colour Contrast Checker or Contrast in Figma), and don’t use colour as the only indicator for error states, but instead also add text or icons.

Typography

To make information within an application accessible, it is important to make the text legible. This can be achieved by choosing a legible font, but also by using enough whitespace and contrast. Users can enlarge the font of an application themselves, so make sure your lay-out still works with a larger font.

Content Markup & keyboard navigation

The way you build up the content on the page, influences how a screen reader or keyboard user will navigate through the page. So:

Forms

It is important to always use labels on input fields. Without labels, screen readers ‘miss’ the input field, and even sighted users might not know what it is about.

Images

When telling a story with images, always provide clear descriptions for users with screen readers. You could also provide alternative text (the alt attribute), which is read out loud in place of the image and shown when the image can’t load. Note: when an image is purely decorative, it should have an empty alt attribute (alt="").

Don’t make text into an image, because then the content will be missed by screen readers (and search engines). Lastly, icons are often not widely understood, so make sure there is a always label (only use tooltips when really necessary).

Audio and video

For videos and audio (like podcasts) there should be captions or transcripts available, as well as controls to play and pause the content.

Animations & movement

Movement can help to make an interface more clear or playful. However, continuous movement (like animated gifs or pulsating animations) can distract users from other content, while large animations can cause vertigo or motion sickness for people with a vestibular disorder. Consider only using small and meaningful animations, or providing alternatives to people who turn on the reduced motion accessibility setting, when using carousels, parallax, horizontal scrolls, etc.

Language use

To make the content of an application accessible to a wide range of people, it is good practice to use easy to understand language. This means avoiding jargon, academic writing and metaphors. Use short sentences and to the point wording. Also consider that links will be read without their context by screen readers, so avoid ‘read more’, ‘click here’ and similar links. Instead, use descriptive links, like the title of an article. Additionally, be mindful of exclusive language, for example when dealing with gender, ethnicity and disabilities.

Time limits

In some applications, users have to take action within a certain time frame, for example for security reasons. However, this can lead to stress or even prevent users from being able to complete the action entirely. Try finding other solutions or allow users to extend the time period.

Research and testing

Take diversity into consideration when selecting participants for research activities and ensure the interviews themselves are inclusive and accessible, too. Make sure participants are justly compensated for their time investment and their privacy is respected. Also consider asking the recruitment agency to select people with specific disabilities or assistive technology uses, and don’t source your participants just from the current user base of a product.

Tips

Learn more

Methods that can help in applying accessibility principles:

Who to ask