Useful tools

Accessibility Tree Viewers

The accessibility tree is based on the DOM and is the data model that assistive tech (such as screen readers) uses to interact with the page.

• Firefox accessibility inspector
• Full accessibility tree in Chrome dev tools

Browser accessibility checkers

• Chrome Lighthouse

3rd party accessibility checkers and browser extensions

Browser extensions evaluate the accessibility of a web page and shows results using icons and indicators, embedded onto the original page.

• AXE
• Wave
• MS Accessibility insights

Color checkers

Interactive online color contrast checker for foreground and background ratios.

• Color contrast checker
• Link contrast checker

Code validators

Code validators help ensure that the code is semantically correct. You can point it to a url, upload a file or paste code straight into it to validate.

• W3C HTML validator
• W3C CSS validator
• HTML_CodeSniffer (browser bookmarklet)

Automated testing

These tools automatically test when you merge code and flags up issues.

• Pa11y
  • Pa11y is a tool that makes a web request and evalutates the loaded page across a number of mechanical accessibility rules. It can alert on poor-contrast elements on the page, and ARIA or HTML spec violations that might affect screen readers.
  • There are a variety of ways to run pa11y in CI, which of course is ideal for automated tools like this. We have experience on multiple projects with using Cypress Audit
• Cypress Audit
  • Cypress Audit is a Cypress plugin that makes it easy to run Pa11y (and Lighthouse) from inside a Cypress test.
  • This means that logging in to your app and configuring pages to have live data on them can be done using Cypress, a tool purpose built for interacting with apps, and pa11y just needs to be brought in for the accessibility evaluation.
  • cy.pa11y() makes a separate request to the current page loaded in your cypress test and runs its evaluation against it.
• Axe dev tools
• A11y storybook add-on - React accessibility testing in Storybook

Assistive technologies

• NVDA (Windows)
• JAWS (Windows)
• VoiceOver(Mac)
• Mac OS Zoom screen magnifier
• Dragon speech recognition

Useful guides

How to allow full keyboard navigation in Mac OS browsers - By default, Apple computers have an operating system (OS) level setting that limits the Tab key to "Text boxes and lists only". This guide shows how to change it.