Skip to content

pa11y ci Integration

Corey M Collins edited this page Jun 24, 2022 · 1 revision

With the pa11y-ci integration, and pa11y-ci-reporter-html layered on top, we can run accessibility checks from the command line.

This gives us the power to check the entire sitemap of a local install to make sure there are no accessibility issues before committing, or to check the accessibility of any other URL and provide an HTML dump of the results.

How To Use It

wd_s now comes with a built in script for accessibility checks:

"accessibility": "pa11y-ci --reporter=pa11y-ci-reporter-html --sitemap $npm_config_url/sitemap.xml",

To utilize this, you'll run the following in your command line:

npm run accessibility --url=https://yoururl.test

The accessibility script will take the value from the URL flag and pop it in place.

This relies on the /sitemap.xml file existing at the parent level of the site. In WordPress, this should just happen automatically with default WordPress behavior but you may need to adjust the script for your project if your sitemap lives in another location.

Viewing Results

Once the results are finalized, you'll see them in a new top-level directory in the theme: /pa11y-ci-report/.

In this directory, you'll see a set of HTML files. If you open the index.html file you'll see a list of all of the pages found in your sitemap with errors, warnings, and notices: list of pages showing accessibility results directory listing of pa11y-ci results

Each page in your sitemap is listed here with only the pages/posts with issues displayed as links to pages which display information for each issue found within the page/post: accessibility results for a single page showing errors

Don't worry about committing your test results – the /pa11y-ci-report/ directory has been added to .gitignore so its contents will be ignored.