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.
Accessibility standards
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 videos). 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.
Extensive work has been carried out on the design token strategy to facilitate easier implementation of these standards.
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
Content should be available to all users. Following UX writing guidelines and ensuring a consistent UI helps users understand products and navigate them effectively.
4. Robust
Digital products should be compatible with current and future technologies. Developers primarily implement this, but anyone on the product team can assist with planning and testing.
This is particularly important for React Native squads — apply this guideline across web and native platforms.
Accessibility and impairment
Impairment durations
Accessibility is often discussed in a permanent context, but it benefits everyone. Users may 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 every user's situation. However, we can prepare for the possibility that a user may still need to access and navigate the content in multiple ways.
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
- Design for small viewports first, and consider how information and UI interactions display across 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