Often, making websites accessible to people with disabilities is often omitted.
We can easily create automated tests to cover & increase the confidence on this topic, using tools like Axe and TestCafe
Note: If you want to manually perform a quick audit on your websites using Axe, there is a chrome browser extension that you can install to enable the audit tool in your DevTools.
Prerequisites
– NodeJS, NPM – setup tutorial HERE
– Chrome Browser
– you already have an automation testing framework created with TestCafe. I’ve previously created blog articles and videos about how to create it, step by step.
Step 1
Add Axe dependency in your project with the following CLI command
npm install axe-core axe-testcafe --save-dev
Step 2
Include accessibility assertion in your existing testcafe e2e tests or create a new test for this purpose.
That’s it! your test is ready to be executed (axe.js is the test file that contains the above test)
npx testcafe chrome tests/axe.js
The test failed because the website (QA-Practice) failed some of the accessibility validations. The test results report looks like this:
Optional Config Step
Axe module allows you to define the context and options (e.g. to apply rules/exclude some HTML tags from the audit process).
Test Example:
If you liked this article, then please subscribe to my YouTube Channel for Test Automation video tutorials. You can also find me on LinkedIn and Twitter.