Integrating pa11y-ci in your CI/CD pipeline

You can always use the pa11y dashboard to cover the accessibility testing needs of your website. But !

• Dashboards go out of visibility and need care and monitoring
• You can still release without conforming with accessibility standards

Enter pa11y-ci, with a smoother integration of pa11y within your CI pipeline than the existing pa11y command line utility.

Two useful references to get started are:

The official-readme, well!
A useful post by Andrew Mee - automated-accessibility-testing-node-travis-ci-pa11y/

Here’s how we set up pa11y-ci for our needs

A. Config file for each environment the app will be deployed to

.pa11ylocal
.pa11ydev
.pa11ystaging
.pa11ylive

.pa11ystaging would look something like

{
    "defaults": {
        "timeout": 15000
    },
    "urls": [
        "https://staging.springer.com/articles",
        "https://staging.springer.com/journals"
    ]
}

B. the package.json

{
  "name": "my-app",
  "version": "1.0.0",
  "dependencies": {},
  "devDependencies": {
    "pa11y-ci": "^1.2.0",
  },
  "scripts": {
      "start": "node app",
      "test": "make test",
      "test-pa11y-ci:local": "./node_modules/.bin/pa11y-ci --config .pa11ylocal"
      "test-pa11y-ci:dev": "./node_modules/.bin/pa11y-ci --config .pa11ydev"
      "test-pa11y-ci:staging": "./node_modules/.bin/pa11y-ci --config .pa11ystaging"
      "test-pa11y-ci:live": "./node_modules/.bin/pa11y-ci --config .pa11ylive"
  }
}

C. Run it

npm install && npm run test-pa11y-ci:staging

D. Run it as part of your post deploy test phase

run-pa11y-ci.sh

#!/bin/bash

DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"

cd "$DIR"/.. && npm install && npm run test-pa11y-ci:$1

which can be called in your post-deploy-run-script file in ci tailored per environment via -

./run-pa11y-ci.sh staging

Combining all of the above, our directory structure looked like this, for reference sake

ci
   | post-deploy-dev.sh //Script to run post deploy to dev
   | post-deploy-staging.sh //Script to run post deploy to staging (calls pa11y-ci via run-pa11y-ci.sh staging)
   ...
   | run-pa11y-ci.sh //Script to run pa11y (accepts env param $1)
.pa11ylocal
.pa11ydev
.pa11ystaging //config files
...
|
package.json

that’s about it!