Accessibility Testing Sandbox

A simple React App, built with Create React App, that helps us to test out accessibility features. We decided to use a React app rather than simple HTML pages as we more often use React than straight HTML on our projects at the moment. Feel free to add different options as needed though.

Up and running

# grab the code
git clone git@github.com:tablexi/a11y-testing-sandbox

# change into the repo root directory
cd a11y-testing-sandbox

# check that you have the necessary version of Node JS installed
# feel free to use the Node version manager of your choice
asdf current nodejs

# install the dependencies
npm i

# start the server
npm start

Running tests

npm test

A11y testing tools

In the browser

We will be using the following tools during the working session. We've only tried these out in Firefox and Chrome-like browsers (Chrome and Brave specifically). If you would like to try using Safari or some other browser, please update this section with anything that you find.

• Axe DevTools - extension for Chrome and Firefox
• Google Lighthouse - built into Chrome DevTools, see note below for using with Firefox
• Tota11y - extension for Chrome and Firefox
• Wave - extension for Chrome and Firefox

Using Lighthouse with Firefox

There is an extension available for Firefox. However, this does not work when testing localhost. If you want to use Lighthouse to test localhost we need to use the Lighthouse CLI tool. Unfortunately this requires us to have Chrome installed, so it's probably easiest just to use directly in Chrome (or a Chrome-like browser).

If we want to use the CLI tool, there is more information in the Lighthouse repo.

In CI

We've also set up CI for Axe, Lighthouse and Pa11y following this guide. The configuration can be found in ./.github/workflow/a11y.yml.

A note on motion settings

One of the things that we included was the use of the CSS media query prefers-reduced-motion. This will prevent animations if the user has selected to reduce motion in their OS. If we would like to see this in action we can follow the instructions here for our OS.

Additional resources

We won't cover these additional resources during the working session, but they inspired us and so we wanted to pass them on!