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.
# grab the code
git clone [email protected]: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 startnpm testWe 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
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.
We've also set up CI for Axe, Lighthouse and Pa11y following this guide. The configuration can be found in ./.github/workflow/a11y.yml.
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.
We won't cover these additional resources during the working session, but they inspired us and so we wanted to pass them on!