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.
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
- 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