1. Home
2. Web Accessibility Testing: How to Automate with Puppeteer and Axe

Web Accessibility Testing: How to Automate with Puppeteer and Axe

Web accessibility refers to the practice of designing and developing web content that is accessible and inclusive, regardless of any type of disability. As a developer or UX designer, it is your responsibility to ensure that your web applications meet the accessibility guidelines to enable people with disabilities to use your app with ease.

Manual testing is an option for ensuring accessibility, but it is time-consuming and prone to human error. To streamline and automate the accessibility testing process, you can use Puppeteer and Axe.

What is Puppeteer?

Puppeteer is a NodeJS library developed by the Chrome team. Puppeteer is mainly used for automating end-to-end (E2E) testing of web applications. It simulates user actions like clicking buttons, filling forms, and navigating between pages to test web apps. With Puppeteer, you can run your web app in headless Chrome or even render it with JavaScript.

What is Axe?

Axe is a powerful accessibility testing engine. Developed by Deque Systems, Axe helps identify and report accessibility issues in your web app. Axe can analyze web pages against WCAG 2.0 and WCAG 2.1 standards to identify issues such as missing alternative text, missing landmarks, incorrect use of ARIA roles, and more.

Setting up Puppeteer and Axe

To get started with using Puppeteer and Axe for web accessibility testing, follow the steps below:

1. Install Puppeteer and Axe:

npm install puppeteer axe-core

2. Launch a headless Chrome instance with Puppeteer:

const puppeteer = require('puppeteer');

(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
// Add accessibility testing using Axe
await page.addScriptTag({ src: 'https://cdn.jsdelivr.net/npm/@axe-core/[email protected]/dist/axe.min.js' });
await page.addScriptTag({content: `axe.run().then(results => console.log(results))`});
await browser.close();
})();

3. Run the script using NodeJS:

node accessibility-test.js

4. Check the console output for any accessibility issues:

[
  {
    "id": "aria-valid-attr",
    "impact": "minor",
    "tags": [
      "cat.aria"
    ],
    "description": "Ensure all ARIA attributes are valid.",
    "help": "If an ARIA attribute is used, its value must be valid.",
    "helpUrl": "https://dequeuniversity.com/rules/axe/4.3/aria-valid-attr?application=axeAPI",
    "nodes": [
      {
        "failureSummary": "aria-hidden=\"flase\" is not a valid ARIA attribute.",
        "html": "
Skip to main content
",
        "impact": "minor",
        "failure": true,
        "node": {
          ...more details here...
        }
      }
    ],
    "score": null
  }
]

Automating Axe with Puppeteer

Instead of manually invoking the axe.run() method, Puppeteer can be used to automate the accessibility testing with Axe.

Here's how to use Puppeteer with Axe:

const puppeteer = require('puppeteer');
const AxeBuilder = require('axe-webdriverjs');

(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');

// Analyze the page with Axe
const results = await new AxeBuilder(page)
.withRules(['wcag21a', 'wcag21aa'])
.disableRules(['color-contrast']) // disable specific rules
.analyze();

console.log(results.passes);
console.log(results.violations);

await browser.close();
})();

Conclusion

In conclusion, Puppeteer and Axe are two powerful tools that can automate the web accessibility testing process, making it more efficient and less prone to errors. To ensure that your web apps meet the accessibility guidelines, use Puppeteer and Axe to test for common accessibility issues.

For even more efficient testing, you can integrate accessibility testing into your continuous integration (CI) process using tools like Jenkins, CircleCI, and TravisCI. Additionally, take a proactive approach to improve your web app's accessibility by following the WCAG 2.1 guidelines when creating your web content.

By adopting these best practices and tools, you can make your web apps more accessible and inclusive for all users, regardless of any disabilities they may have.