Accessibility checklist for designers
If you're just beginning a new design project or doing your final checks, use this checklist to ensure your designs are web accessibility compliant. This checklist is adapted from the WCAG guidelines, specifically for designers. For each item, you'll find:
- Which users might be affected
- How you can design for it
- The corresponding WCAG success criterion
- Useful resources
Download this checklist as a PDF
Users that cannot see or hear content should still be able to understand it. Text alternatives are versatile and can be presented to the viewer according to their needs (screen reader, captions etc.)
- Add accessible text descriptions for images and audio
- Provide interactions to access transcripts or closed captions for video
Users that cannot see the page, like screen-reader users, should still be able to understand its information structure.
- Annotate a reading order in your design file
Users with visual impairments affecting their perception of colour need non-visual instructions.
- Pair colour cues with a text cue to communicate information
Users can adjust how text is presented on their own displays, without losing image quality.
- Check your design for any images of text that convey important information.
- Either replace these images with text if possible, or provide alternate text.
- Annotate decorative images like logos, so your developer knows to add an empty alt text attribute.
Some users cannot see elements with low contrast, but still need to know the important visual information.
- Check your colour choices for graphics and UI components using dedicated accessibility colour checkers
Users with visual impairments may not be able to distinguish colour-coded instructions.
- Pair colour cues with a text cue to communicate information
Users that have their displays oriented or mounted differently should still be able to use your design.
- Design responsively for different breakpoints
- Don’t restrict view and operation to one orientation unless absolutely necessary
Content can be navigated more predictably.
- Check that navigation is ordered consistently across multiple pages
- Use component libraries to standardise recurring components
- For bigger design teams, consider keeping an updated style guide for designers to stay aligned
Users with visual impairments may need to enlarge text to read it. They may do so using the built-in browser tools.
- Check that doubling the size of the text does not break your design
- If text in your design has non-standard positioning, consider adding design annotations for the space a piece of text should occupy in your design.
People who are blind or have low vision need non-visual instructions.
- Describe controls by name, not just by appearance or location
A page that automatically plays music or sounds can disrupt users and interfere with screen readers.
- For the highest level of compliance, remove any automatically-playing audio. Audio should only be triggered by users.
- Design for media controls
- Ensure any videos are large enough that media controls do not obscure content
Some users may be distracted by content that is moving.
- Design a mechanism to pause, stop or hide information that:
- starts automatically;
- lasts more than five seconds
*Unless the movement is essential, defined by W3C as " if removed, would fundamentally change the information or functionality of the content, and information and functionality cannot be achieved in another way that would conform".
Read more about essential movement here.
Rapidly flashing content can trigger seizures for users with epilepsy or photosensitive seizure disorders.
- Ensure no visual content contains flashes
- Provide interactions to access transcripts or closed captions for video
Flagging errors helps people with reduced sight and cognitive disabilities identify and resolve them.
- Document error states clearly
- Provide descriptive notification of errors
Some users need guidance on what information to enter.
- Check all input fields in your design for labels or instructions
- Provide simple labels or instructions
Providing suggestions on how to resolve errors can help users complete interactions.
- Design error-suggestion interaction flows
- Identify and annotate areas where suggestions are needed
You can prevent users from submitting incorrect important information.
- Provide ways for users to confirm, correct or reverse important submissions
Keyboard users navigate content by the focus order. Determining the correct focus order helps them to understand the website.
- Annotate a clear focus order in your design
Keyboard users can skip over long, repetitive groups of content.
- Include a ‘Skip to content’ button in your design
Some users may require a longer time to complete interactions.
- Design a mechanism for turning off, adjusting or extending the time limit
Ensuring that the focus indicator is visible allows sighted users to see their cursor.
- Before designing a hover state for your components, discuss with your developer whether your design will be compatible with the browser default focus indicator