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:
Enjoyed this article? Make sure to subscribe to my YouTube Channel for more Test Automation tutorials, and follow me on LinkedIn and Twitter for regular insights.
Looking to accelerate your test automation journey?
I’ve designed a personalized 1-on-1 mentoring program tailored to boost your skills. Reach out at iamqarv@gmail.com for more details 🚀