Developer tools



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


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

Document Structure

  • 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
  • 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)



Automated testing

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!

results matching ""

    No results matching ""