Tools

Amplify

By far our most comprehensive and helpful tool is our front-end starter kit: Amplify. It covers a range of components built according to our best practices. Most of these components have been the object of an accessibility review.

Amplify also provides a good example of how our build tools and NPM scripts should be set up.

Automated accessibility tools

axe DevTools

We use axe DevTools for quick automated accessibility testing. This is available as a Chrome extension and Firefox add-on.

While this will never replace auditing by accessibility testing specialists, it is very useful to assess your own work whilst building the front-end of a website.

WAVE Web Accessibility Evaluation Tool

Another automated checker, WAVE has a different presentation to axe DevTools that can help with visualising the heading structure of a page and picking up other issues. It is also available as browser extensions:

• WAVE for Chrome
• WAVE for Firefox
• WAVE for Edge

Accessibility Insights

We use Accessibility Insights for basic accessibility conformance checks that go beyond the automated tests of axe DevTools and WAVE to include some simple guided manual tests.

Colour contrast

WAVE will automatically identify elements it finds to have contrast issues.

The Colour Contrast Analyzer is a download. It can be used for checking colours used on websites, but the integrated colour picker means it can be used in lots of other areas too, such as PDFs and slide presentations.

WhoCanUse is great for quickly checking different text and background colour combinations for accessibility. It also allows you to adjust colours to find accessible combinations.

Contrast Checker can check the contrast of text against an object background, e.g. a button, and check the contrast of the object background with the page background.

Contrast Ratio is great for testing semi-transparent colours.

There is also a tool for checking the contrast of text on a background image.

Checking the heading hierarchy on web pages

WAVE can be used to assess the heading hierarchy on a web page.

Alternatively, use the HeadingsMap browser extension to generate a “map” of the headings used on a web page:

• HeadingsMap for Chrome

• HeadingsMap for Firefox

• HeadingsMap for Edge

Google Lighthouse and PageSpeed Insights

We use PageSpeed Insights and Google Lighthouse to measure core web vitals (indices of performance).

PageSpeed Insights is most beneficial to use after the site has been launched and used for a while as it reports on real user experience.

Google Lighthouse is very useful in the course of development.