Accessibility
Developer tools
https://react-spectrum.adobe.com/react-aria/index.html
https://www.npmjs.com/package/eslint-plugin-jsx-a11y
https://github.com/dequelabs/react-axe
Guidelines
Colour
- Never rely exclusively on colour to convey information.
- The contrast between text and background colour 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.
Content
- Link text is descriptive
- Do not use shape, size, colour, or location to communicate instructions.
Forms
- 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.
Multimedia
- 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.
Document Structure
- Follow established design patterns whenever possible.
- Documents should establish clear hierarchy using H1, H2, H3 etc.
Testing
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
- Zoom
- 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)
Resources
Checklists
- Checklist by 18F, ordered by severity
- W3 Easy checks
- Full WCAG criteria but in plainer English
Automated testing
- 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
Rapid testing
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 the MacOS "voiceover" tool to simulate a visually impaired experience
- Try it on iOS too!