Although not a replacement for proper accessibility audits, automated audits can help in improving the accessibility of your website, by catching common issues.
There are lots of different ways to do an accessibility audit, like Chrome DevTools. There is another way which you can do right from your Terminal, and that's with Docker. Here's how!
Setting things up
💡 We're going to be using Docker for this tutorial. Install Docker, if you haven't done so.
We're going to create an image which is going to host our accessibility audit tool, and then use that image to run audits on different websites.
To set up our audit tool, we need:
Puppeteer which is a tool by Google to run headless Chrome/Chromium
Pa11y which is an open source tool which runs accessibility audits.
Step 1: Create a Dockerfile
In the directory you're working on, create a new file called Dockerfile, and paste this in the file:
FROM buildkite/puppeteer:v1.15.0
RUN npm install --global --unsafe-perm pa11y-ci
RUN groupadd -r user && useradd -r -g user user
USER user
ENTRYPOINT ["pa11y-ci"]
This file essentially:
Imports an image with Puppeteer preinstalled and set up
Installs Pa11y-CI globally with NPM
Creates a new non-root user
Creates an entry point with the command
pally-ci. This will come in handy when running audits in the terminal.
Step 2: Build the image
The next step is to use our Dockerfile to build the image for our accessibility audit tool:
docker build -t accessibility-audit .
This command builds the image with the tag accessibility-audit.
Step 3: Run audits
After a few seconds, our image is built, and we can use it to run accessibility audits.
For example, to test a website with the URL https://techforhumans-web.vercel.app/, we use this command:
docker run accessibility-audit https://techforhumans-web.vercel.app/
The above command runs pa11y-ci https://techforhumans-web.vercel.app/ within a new container, based on our image. But because we've set up pa11y-ci as an ENTRYPOINT in our Dockerfile file above, we only need to specify the URL.
If your site has no accessibility issues, you'll see something like this:
> https://techforhumans-web.vercel.app/ - 0 errors
✔ 1/1 URLs passed
Otherwise, you'll see a detailed breakdown of potential issues.
Example:
• Img element missing an alt attribute. Use the alt attribute to specify a
short text alternative.
(#substories > div:nth-child(51) > div > div:nth-child(2) > div:nth-child(3)
> div:nth-child(1) > a:nth-child(1) > div > span:nth-child(1) >
span:nth-child(5) > img)
This way, you can check for common issues in your website without leaving your Terminal and without having to download additional software or libraries.