Overview
All users can encounter accessibility issues at some point. Therefore, all information and services should be accessible to any user interacting with digital products.
The Web Accessibility Initiative (WAI) is widely regarded as the standard in web accessibility. WAI exists to create standards and tools to improve the accessibility of digital products.
There are three essential components of the standard:
- ATAG for development
- WCAG for content
- UAAG for users
There are numerous in-depth guides to using these tools and standards; however, this document provides an overview of how they relate to other guidelines within the 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 extends beyond simply considering keyboard and mouse usage. It also means considering information architecture, touch targets, tab indexing, and navigation across other devices.
Designers should also consider animation and transitions, ensuring that any motion does not induce a seizure.
3. Understandable
It goes without saying that we want the content to be available to all users. Following content guidelines and ensuring the UI is consistent will help all users understand the products and navigate more effectively.
4. Robust
Any digital products we build should be compatible 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
Impairment 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 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 impairments, including:
- Vision
- Hearing
- Mobility
- Cognitive
It's clear from this list that it's hard to judge the scenario of every user. However, we can prepare for the possibility that a user may still need to access and navigate the content in more than one way.
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 a development squad 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 resources
Browser extensions
Figma plugins
Sites and reports
- HTMHELL - A collection of bad practices in HTML and how to fix them
- WHO Vision 2021 - A report on vision from the World Health Organisation
- The Button Cheat Sheet - A guide on button and link best practices