Accessibility

All of our work should comply to AA web standards.

Overview

All users can face accessibility issues at one time or another. So all of our information and services should be available to any user interacting with our digital products.

Web Accessibility Initiative (WAI) is seen by most as the standard in web accessibility. WAI exists to create standards and tools to improve the accesibility of your products.

There are three essential components of the standard:

  • ATAG for development
  • WCAG for content
  • UAAG  for users

There are many in-depth guides to using these tools and standards but this document should serve as an overview and how it relates to other guidelines in our design system.

Minimum accessibility standards

When it comes to WCAG, there are three levels of compliance:

  • Level A
  • Level AA
  • Level AAA

This helpful UX Collective article, which gives an overview of web accessibility standards for designers, explains that the AA standard:

Level AA (mid range)
Deals with the biggest and most common barriers for disabled users. Your website should satisfy this checkpoint. Otherwise, one or more groups will find it difficult to access information in the document. Satisfying this checkpoint will remove significant barriers to accessing web documents.

Key accessibility principles

There are four key principles of WCAG and accessibility.

1. Perceivable

Users should be able to understand the content of media (images and video). This can be achieved by using the correct HTML markup and clear descriptions.

Most importantly for designers, colour usage and text sizes should be legible for users and content should be structured so it makes sense on different viewport sizes.

2. Operable

This principle is more than just thinking about keyboard and mouse usage. It also means thinking about information architecture, touch targets, tab indexing and navigation with other devices.

Designers should also think about animation and transitions and make sure any motion does not induce a seizure.

3. Understandable

It goes without saying that we want our content to be available to all users. Following content guidelines and making sure our UI is consistent will help all of our users understand our products and navigate our site.

4. Robust

Any digital products we build should be able to work with current and future technologies. Although this primarily falls on developers to implement, anyone in the product team can assist in planning and testing their output.

Accessibility and impairment

Impairement durations

When we talk about accessibility, it's usually mentioned in a 'permanent' context. But accessibility is for everyone.

And a user could require accessible solutions at any point depending on their impairment:

  • Permanent
    Loss of a limb or physical impairment
  • Temporary
    Temporary impairment such as an injury
  • Situational
    Short term difference in your environment (for example, holding a child or seeing a glare from working outside)

Impairment types

As well as duration, users may have one or more impairment, including:

  • Vision
  • Hearing
  • Mobility
  • Cognitive

It's clear from this list that it's hard to judge the scenario of every user. But what we can prepare for is to make sure a user can still access and navigate our content in more than one way.

Examples of impairment durations

Examples of impairment durations

Quick checklist for designers

  • Make sure any designs have a colour contrast that passes a contrast test
  • Include tab indexing when annotating a flow (Stark’s plugin can help with this)
  • Work with your development team to discuss the correct document structure, agree on the correct tab indexing and use of keyboard controls, and capture the labels required for supporting tags such as alt and titles
  • Although we design mobile-first, make sure to consider how information and UI interactions will be displayed on different viewports

Accessibility tools and sesources

Browser extensions

Figma plugins

Sites and reports