How to Use Pa11y for Automated Accessibility Testing

In this blog, we will walk through how to use the open source tool, Pa11y, to setup and run automated accessibility testing. Before you can start the Automated Accessibility Testing, you’ll need to install the prerequisite tools that are required for this type of testing.  Don't worry, we will provide the list of tools needed as well as the setup and configuration instructions for each tool.

Tools Needed:

Here are the tools and installation steps needed to do the testing.

Step 1: Install Python then setup in Environment Variables

• Download latest version of Python.
• Select Python 2.7.xx.
• Install and follow the installation process.
• After successful installation, set the following in your Environment Variables option.
• Go to System directory, then click "Advanced system settings" link.
• Click "Environment Variables..." button
• Under System variables option, click "Path" then "Edit..." button 
• Click "New" button, then add "C:\Python27\Scripts" and "C:\Python27\"

Step 2: Install Git Bash

• Download and install the latest version.

Step 3: Install Pip

• Download and follow the instruction on how to install pip.

Step 4: Install WAMPP

• Download and install the latest version.

Step 5: Install Nodejs

• Download and install latest version (e.g. v8.2.1 Current).
• After installation, RESTART your computer.

Step 6: Install NPM

• Download "install npm."

Step 7: Install Pa11y

• Open Git Bash terminal

• Execute this:

  npm install -g pa11y

Step 8: Install xmltodict

• Open Git Bash terminal

• Execute this command 

  pip install xmltodict

   

Step 9: Go to https://github.com/promet/pa11y-sitemap

• Then checkout the pa11y-sitemap folder.

Step 10: Go to the pa11y-reporter link.

• Here's the link.
• 'Click 'Clone or download' button.
• Click 'Download ZIP' button.
• File will be downloaded and labeled as pa11y-reporter-master.zip.

Step 11: Copy or transfer the file (pa11y-reporter-master.zip) to your pa11y-sitemap folder

Step 12: Unzip the file pa11y-reporter-master.zip

How to Generate an html Output for Web Accessibility Errors Only with links to WCAG

1. Open Git Bash.
2. Go to your pa11y-sitemap folder location.
3. Execute this command:  

python pa11y-sitemap-error-only.py -x <client sitemap.xml> -o <output directory> -r promet_reporter

Example:  

python pa11y-sitemap-error-only.py -x poplar-sitemap.xml -o POPLAR/reporter/error_only/ -r promet_reporter

Results: It will generate file(s) with html output format and with links to WCAG.

​

How to Generate an html Output for Web Accessibility errors, warnings, and notices with links to WCAG

1. Open Git Bash.
2. Go to your pa11y-sitemap folder location.
3. Execute this command:  

python pa11y-sitemap.py -x <client sitemap.xml> -o <output directory> -r promet_reporter

Example:  

python pa11y-sitemap.py -x poplar-sitemap.xml -o POPLAR/reporter/errors/ -r promet_reporter

Results: It will generate file(s) with html output format and with links to WCAG guidelines.

How To Generate a Pa11y Summary File of Web Accessibility Errors, Warnings, & Notices

1. Open Git Bash.
2. Go to your pa11y-sitemap folder location.
3. Execute this command:  

python pa11y-sitemap.py -x <client sitemap.xml> -o <output directory> 

Example:  

python pa11y-sitemap.py -x poplar-sitemap.xml -o POPLAR/reporter/summary/ 

Results: It will generate file(s) with JSON output format.

1. Copy the file(s) where your JSON folder is located (Note: This was set in config.php file) 
2. Launch WAMP Server then select Localhost.
3. Copy the folder name pa11y-summary-PDF-generator-master, paste it beside localhost url then press ' Enter ' key.
4. Save as a PDF.
5. Launch http://localhost/pa11y-summary-PDF-generator-master/ in Chrome browser (recommended browser).
6. Press ' Ctrl + p ' in the keyboard, then click ' Save ' button
7. Open the pdf file to view the summary results.