Pa11y and Pa11y-CI Accessibility testing

Accessibility is a really important thing when it comes to making a good site and make it available for all to use the site and for crawlers to make things easy as well. Automating this and making the best of the site to keep going faster without worry about accessibility and let the bot do the report for you so that you can fix later is the best part. So let’s do this automation.


Pa11y (Pally)

A command-line interface which loads web pages and highlights any accessibility issues it finds. Useful for when you want to run a one-off test against a web page.


I will be covering what their documentation forgot to document (that which i leant from my own testing and learning).


Running test with sitemap

Pa11y and Pa11y-Ci says that you can do testing with sitemap.xml files while its really good. Here are the things that they didn’t document well

  • Pa11y can scan and add sub sitemap links and do scan on them
  • Pa11y can parse sitemap index and add links and sub sitemap files automatically and parse them and it to the list of links to test and also test it automatically
  • Pa11y can run sitemap test and local html file test and test based on config files all at once (All can be done at same time)

Running test with local html files

Pa11y and Pa11y-Ci says that you can do testing with local html files while its really good. Here are the things that they didn’t document well

  • Pa11y can scan local html files while still using sitemap or json based config (All can be done at same time)

Running test with config.json

Pa11y and Pa11y-Ci says that you can do testing with config.json files while its really good. Here are the things that they didn’t document well

  • Pa11y can do scans with config.json files while still using sitemap or local html based config (All can be done at same time)

Bonus

Accessibility testing automation with github actions

    steps:
- name: Setup node
uses: actions/setup-node@v4
with:
node-version: 18

- name: Install pa11y-ci.
run: npm install -g pa11y-ci

- name: Checkout source.
uses: actions/checkout@v4

- name: Install Chrome.
uses: browser-actions/setup-chrome@v1
with:
chrome-version: 120

- name: Run pa11y-ci.
run: pa11y-ci https://immanuelraj.dev

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *