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

https://reakit.io/

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!