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:

1. Imports an image with Puppeteer preinstalled and set up

2. Installs Pa11y-CI globally with NPM

3. Creates a new non-root user

4. 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.