Where To Start?
If you are a web developer looking to level up your teams UI automated tests to include accessibility what is the first thing you do? Google search of course!
When you google search though, you may find yourself a bit overwhelmed with where to start. There are numerous different accessibility testing libraries and all them seem to work their own way.
This is where developers tend to stop and go, "Well this is a lot, maybe ill add it later". That later, unfortunately, never comes.
Let's break down how you can chose the best testing library for your development team!
What Are My Options?
There are multiple different packages that you can install into your project that allow you to include accessibility in your UI tests.
The ones that I highly suggest for usage in UI testing are as follows:
-
Axe-core - Axe is an accessibility testing engine for applications and HTML based content. It is the most powerful rules engine for accessibility and contains the MOST integrations on the market. Examples of integrations include:
- Playwright
- Cypress
- Puppeteer
PA11y - A command line node.js library that runs HTML code sniffer by default but also can run the axe-core rules as well!
Google Lighthouse - Node CLI package that runs various checks on your application, but also includes accessibility testing as well!
Wave by WebAIM - The WAVE extension is one of the most powerful extensions for accessibility testing. The package allows you to include that powerful testing in a CLI.
All of these work differently in their own respective ways. So how do you know which one to choose?
Making The Best Choice
When deciding which accessibility testing library you should use, it comes down to one thing. Ease of integration!
Whichever library fits into what your development team is doing for UI testing, should be the one you use.
For example, if your development team does integration level testing or end to end testing, then PA11y or Wave is a great library to use as it will fit directly into integration testing with its CLI or NodeJS commands.
An example of pa11y running:
test("Space Jam is accessible", async () => {
await pa11y('https://spacejam.com/1996').then((a11yResults) =>
{
expect(a11yResults.issues.length).toBe(0)
});
});
If you are already using a previous testing library like Lighthouse, then simply ensure the accessibility tests are running and are visible! They should be included in the output results.
Finally, if you want a specific integration into a testing framework such as Playwright or Cypress, use an axe-core integration. They are extremely easy to integrate into your current testing framework and can have you up and running in no time!
Example using @axe-core/playwright
test("is accessible", async () => {
const page = await context.newPage();
await page.goto('https://www.spacejam.com/1996');
const results = await new AxeBuilder({ page }).analyze();
expect(results.violations.length).toBe(0);
});
In Summary
Choosing a library can be overwhelming to start. However, with a simple understanding of the top options available, you can get your development teams UI testing up and running with accessibility tests in no time!
Top comments (1)
Important to note that Pa11y can use the axe driver too.
Also, really worth looking at this tool which is based on axe core github.com/GovTechSG/purple-a11y
Also Unlighthouse.dev is great too.