- Never rely exclusively on color to convey information.
- The contrast between text and background color should be at minimum 4.5 to 1.
- The contrast for user interface components (forms, charts, infographics, etc) should be at a minimum 3 to 1.
- Link text is descriptive
- Do not use shape, size, colour, or location to communicate instructions.
- Design around native browser elements whenever possible.
- Design focus states for fields and buttons. This improves keyboard navigation.
- Clearly label all fields. Never hide labels.
- Multiple errors are summarised at the top of the form.
- Always provide alt text for images / non-text content. Decorative images have empty alt text.
- Videos should always include closed captions.
- Audio should always include a transcript.
- Follow established design patterns whenever possible.
- Documents should establish clear hierarchy using H1, H2, H3 etc.
GDS has a compiled a list of useful things to test with, but some quick checks to catch a lot (most) things:
- Try it with a screenreader
- Voiceover with Safari on iOS
- NVDA on Windows
- 400% in Chrome
- Increase font size – in browser
- Tab through with the keyboard
- Invert display colours – accessibility tools on Mac lets you do this
- Firefox dev tools have good accessibility features
- Firefox Nightly includes option of simulating different visual impairments (colour blindness, low contrast)
- WAVE by WebAim (browser extension)
- A11y colour checks (browser extension)
- aXe by deque (browser extension and CLI)
- nu HTML checker by w3
- A bunch more audited by GDS
Things you can do when you're developing to make sure you've not missed things:
- Install the WAVE accessibility browser extension to guide you
- Tab through a whole page and see if the focus goes where you'd expect. Try and type and enter and fill out the thingy
- Use macos's "voiceover" tool to simulate a visually impaired experience
- Try it on iOS too!