Accessibility enhances the user experience for everyone, allowing a wider audience to engage with your content. One powerful tool that can help you in this process is Axe — an accessibility testing engine for websites and other HTML-based user interfaces. It’s fast, secure, lightweight, and was built to seamlessly integrate with any existing test environment so you can automate accessibility testing alongside your regular functional testing.
In this step-by-step tutorial, I will guide you through the process of setting up and using axe-core/cli npm package to audit your website’s accessibility. This guide will provide you with the knowledge and tools to make your website more inclusive.
Prerequisites
NodeJS v6 or above
Google Chrome browser v59 or above
Getting started with @axe-core/cli
This npm package provides a command line interface for axe to run quick accessibility tests. By default, axe-cli runs Chrome in headless mode
Installation
@axe-core/cli is an npm package, therefore you can simply install it globally on your computer by running in the CLI the following command:
npm install @axe-core/cli -g
You will also need a webdriver. It is necessary so other programs on your machine can open a browser and operate it.
npm install -g browser-driver-manager
npx browser-driver-manager install chrome
More details about other available webdrivers can be found at selenium-webdriver project. Alternatively, you can use Webdriver manager
Usage
run the axe command in your CLI, followed by the URL of the web page you want to test
axe https://razvanvancea.ro/
How to run on multiple websites simultaneously
axe https://razvanvancea.ro, https://www.deque.com
How to set specific WCAG guidelinde
axe https://razvanvancea.ro --tags wcag2aa
How to disable specific rule
axe https://razvanvancea.ro --disable color-contrast
Note: disabling specific rule can be combined with the WCAG guideline as well, as it follows
axe https://razvanvancea.ro --tags wcag2aa --disable color-contrast
Defining scope of a test
This approach is used to exclude specific elements from testing (e.g. elements that are visual or screen-reader only) using “exclude”, or focusing the scanning only for a specific area of a page, using “include” with CSS Selectors.
axe https://razvanvancea.ro --exclude "#aside"
axe https://razvanvancea.ro –include “#main”
axe https://razvanvancea.ro –include “#div1,#div2,#div3”
Test results in a JSON format
axe https://razvanvancea.ro –save results.json
How to add a timer
It is useful to see will log how long it takes to load the page, and how long it takes to run axe-core.
axe https://razvanvancea.ro --timer
How to add a timeout
axe https://razvanvancea.ro --timeout=60
How to add verbose output
This approach is useful especially for debugging purpose.
axe https://razvanvancea.ro --verbose
How to add explicit delay
This inserts a waiting time (ms) before running the audit, making sure the application is fully loaded.
axe https://razvanvancea.ro --load-delay=2000
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 improve your test automation skills?
I’ve created a personalized 1-on-1 Mentoring program refined to boost YOUR CURRENT skills. Reach out at iamrv@razvanvancea.ro for more details and together will create a learning path adapted to your skills and goals that you are aiming for, in a timely-efficient manner🚀