{"id":761,"date":"2024-11-22T07:31:06","date_gmt":"2024-11-22T07:31:06","guid":{"rendered":"https:\/\/razvanvancea.ro\/blog\/?p=761"},"modified":"2025-01-31T11:42:04","modified_gmt":"2025-01-31T11:42:04","slug":"web-accessibility-a-step-by-step-guide-to-testing-with-axe-core-cli","status":"publish","type":"post","link":"https:\/\/razvanvancea.ro\/blog\/2024\/11\/22\/web-accessibility-a-step-by-step-guide-to-testing-with-axe-core-cli\/","title":{"rendered":"Web Accessibility: A step-by-step guide to Testing with @axe-core\/cli"},"content":{"rendered":"
<\/div>\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

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\u00a0Axe<\/a> \u2014 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.<\/p>

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\u2019s accessibility. This guide will provide you with the knowledge and tools to make your website more inclusive.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Prerequisites<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

NodeJS<\/a> v6 or above<\/p>

Google Chrome browser v59 or above<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Getting started with @axe-core\/cli<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

This npm package provides a command line interface for axe<\/a> to run quick accessibility tests. By default, axe-cli runs Chrome in headless mode<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Installation<\/strong><\/h3>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

@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:<\/p>

npm install @axe-core\/cli -g

<\/strong><\/em>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

<\/strong><\/em>More details about other available webdrivers can be found at selenium-webdriver project<\/a>. Alternatively, you can use Webdriver manager<\/a>
<\/strong><\/em><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Usage<\/strong><\/h3>

run the axe<\/strong> command in your CLI, followed by the URL of the web page you want to test<\/p>

axe https:\/\/razvanvancea.ro\/<\/strong><\/em><\/pre>
\u00a0<\/h3>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"axe-core-cli-scan\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\u00a0<\/h3>
How to run on multiple websites simultaneously<\/h3>
axe https:\/\/razvanvancea.ro, https:\/\/www.deque.com
<\/strong><\/em><\/pre>
\u00a0<\/h3>
How to set specific WCAG guidelinde<\/strong><\/h3>
axe https:\/\/razvanvancea.ro --tags wcag2aa<\/strong><\/em><\/pre>
How to disable specific rule<\/h3>
axe https:\/\/razvanvancea.ro --disable color-contrast<\/strong><\/em><\/pre>
Note: disabling specific rule can be combined with the WCAG guideline as well, as it follows<\/p>
axe https:\/\/razvanvancea.ro --tags wcag2aa --disable color-contrast<\/strong><\/em><\/pre>
Defining scope of a test<\/h3>
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.<\/p>
axe https:\/\/razvanvancea.ro --exclude \"#aside\"<\/em><\/strong><\/pre>
axe https:\/\/razvanvancea.ro –include “#main”<\/p>
axe https:\/\/razvanvancea.ro –include “#div1,#div2,#div3”<\/p>
Test results in a JSON format<\/h3>
axe https:\/\/razvanvancea.ro –save results.json\u00a0<\/strong><\/em><\/p>
How to add a timer<\/h3>
It is useful to see will log how long it takes to load the page, and how long it takes to run axe-core.<\/p>
axe https:\/\/razvanvancea.ro --timer<\/strong><\/em><\/pre>
How to add a timeout<\/h3>
axe https:\/\/razvanvancea.ro --timeout=60
<\/strong><\/em><\/pre>
\u00a0<\/strong><\/em><\/pre>
How to add verbose output<\/h3>
This approach is useful especially for debugging purpose.<\/p>
axe https:\/\/razvanvancea.ro --verbose
<\/strong><\/em><\/pre>
\u00a0<\/strong><\/em><\/pre>
How to add explicit delay<\/h3>
This inserts a waiting time (ms) before running the audit, making sure the application is fully loaded.<\/p>
axe https:\/\/razvanvancea.ro --load-delay=2000<\/span><\/em><\/pre>
\u00a0<\/em><\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
Enjoyed this article? Make sure to subscribe to my\u00a0YouTube Channel<\/a><\/em>\u00a0for more Test Automation tutorials, and follow me on\u00a0LinkedIn<\/em><\/a>\u00a0and\u00a0Twitter<\/a><\/em>\u00a0for regular insights.
Looking to improve your test automation skills?
<\/span>I’ve created a\u00a0personalized 1-on-1 Mentoring program\u00a0<\/span>refined to\u00a0boost YOUR CURRENT skills.\u00a0<\/span>Reach out at\u00a0iamrv@razvanvancea.ro<\/a>\u00a0for more details and\u00a0together\u00a0<\/span>will create a\u00a0learning path\u00a0<\/span>adapted to\u00a0your skills and goals\u00a0<\/span>that you are aiming for,<\/span>\u00a0in a\u00a0timely-efficient manner\ud83d\ude80<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"
Accessibility enhances the user experience for everyone, allowing a wider audience to engage with your…<\/p>\n","protected":false},"author":2,"featured_media":1045,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[12],"tags":[],"class_list":["post-761","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tools"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t