Axe DevTools: The Complete Guide to Accessibility Testing

Accessibility testing is a crucial step in ensuring that your website or application is usable by everyone, regardless of their abilities. Axe DevTools is a popular tool for accessibility testing, and it's free to use.

Axe DevTools can scan your website or application and provide a report on any accessibility issues it finds. This report can include details on how to fix the issues, making it a valuable resource for developers and designers.

With Axe DevTools, you can test for a wide range of accessibility issues, including color contrast, keyboard navigation, and screen reader support. This ensures that your website or application is usable by everyone, including those with visual, motor, or cognitive disabilities.

Axe DevTools is also highly customizable, allowing you to tailor your testing to your specific needs. You can choose which accessibility rules to apply and even create your own custom rules.

A different take: Rapid Web Application Development Tools

To get started with axe DevTools, you'll first need to install the browser extension. To do this, head over to Deque's axe website and select the appropriate version for your specific browser, whether that's Chrome, Firefox, or Edge.

For more insights, see: Axe Devtools Pro

The axe DevTools Extension is one of the free trials available, which offers interactive testing in your browser. You can also explore the other free trials, such as axe DevTools Mobile, which allows you to test any app on iOS, Android, or other cross-platform technology.

Here are the different free trials you can choose from:

The intended audience for this installation and setup guide is likely IT professionals and network administrators who have experience with similar software and hardware configurations. They'll be able to navigate the complex setup process with ease.

The guide assumes a basic understanding of networking fundamentals, such as IP addresses, subnet masks, and default gateways. This knowledge will be crucial for setting up the device correctly.

IT professionals will appreciate the detailed step-by-step instructions and technical specifications provided throughout the guide. They'll be able to troubleshoot and resolve any issues that may arise during the installation process.

The setup process is designed to be completed within a few hours, assuming a stable internet connection and access to the necessary hardware and software components.

On a similar theme: Best Web Programming Software

To install axe in your browser, you'll need to visit Deque's axe website and select the appropriate version for your specific browser, such as Chrome, Firefox, or Edge.

The process is straightforward and takes just a few clicks.

You can choose from the available versions to download and install axe in your browser.

To test with axe, you'll first need to open DevTools by pressing F12, or Control+Shift+I, or Command+Option+I (macOS), and make sure you're on the Elements tab.

The URL you're testing should be https://www.w3.org/WAI/demos/bad/before/home.html, a website purposefully designed with defects to show common accessibility issues.

Click the “»” button to open a submenu and select “axe DevTools” from the submenu.

A new tab, “axe DevTools”, will appear. Click the “Scan ALL of my page” tile to start the test.

The axe test results will appear, showing defects, including Critical ones.

To get additional information on a particular issue, select it from the list.

For more insights, see: How to Open Devtools

A specific issue is displayed, along with Issue Tags, such as “wcag2a” and “wcag111”, which indicate the level of WCAG success criterion failure.

The “highlight” button will visually highlight the page element that caused the defect.

The “Inspect” button will display the HTML code that caused the defect in the Elements tab.

If you want to fix the issue, you can add an alt attribute to the problematic element, like in the case of an image without alternative text.

To re-run the scan, click the button that looks like an arrow pointing in a circle, also known as the “Re-run automatic scan” button.

Note that axe usually reports accurate results, but may occasionally report a false positive, such as assuming white text on a coloured background is on a white background.

To thoroughly test all parts of the page, you may need to open accordions, open modal dialogs, and try all responsive design layouts by changing your browser window's width.

Here are some essential tools and resources to help you with axe testing:

Accessibility testing is a crucial step in ensuring that your website or application is accessible to everyone, regardless of their abilities. To test with axe, you can follow the steps outlined in the example, which involves scanning your page for defects and getting additional information on specific issues.

axe usually reports accurate results, although it may occasionally report a false positive, such as incorrectly flagging a color contrast defect. To thoroughly test all parts of the page, you may need to open accordions, open modal dialogs, and try all responsive design layouts.

Here are some additional testing tips to keep in mind:

Automated accessibility testing tools like axe enable testers to reduce the volume of manual tests they have to do without machine assistance, allowing them to focus manual testing efforts on more complex issues that can’t yet be detected automatically.

Testing tips can be a bit tricky, but don't worry, I've got some advice to help you out.

Axe usually reports accurate results, although it may occasionally report a false positive, like if you have white text on a colored background and axe assumes the background is white.

To thoroughly test all parts of the page, you may need to open accordions, open modal dialogs, and try all responsive design layouts by changing your browser window's width.

Axe browser extensions are available for Chrome, Firefox, and Edge, so make sure you have the right one installed.

Here are some pages to test axe on, both before and after they've been fixed: https://www.w3.org/WAI/demos/bad/before/home.html and the "Before" page of any website you're currently working on.

Readers also liked: How to Open Html Editor Ona Website

Digital testing tools can't replace manual testing entirely. Automated tools can only detect a portion of accessibility issues, leaving complex problems for human testers to handle.

Manual accessibility testing is still necessary for detecting issues that automated tools can't catch. These complex issues often require a human touch to identify and resolve.

For your interest: Website Accessibility Checker Free

Digital accessibility testing tools don't eliminate the need for manual testing, but they can make the process more efficient. Testers can use semi-automated tools like Intelligent Guided Tests to streamline their work.

With the right tools and a strategic approach, testers can reduce the volume of manual tests they need to perform. This allows them to focus on the most critical issues that require human expertise.

WCAG 2.1 Accessibility Rules are a set of guidelines that ensure digital products are accessible to people with disabilities. These rules are divided into two categories: WCAG 2.0 Level A & AA Rules and Best Practices Rules.

WCAG 2.0 Level A & AA Rules are enforced by axe Chrome browser extension, axe Firefox browser extension, and axe Edge browser extension. This means you can use these extensions to test your website's accessibility on different browsers.

Best Practices Rules are rules that don't necessarily conform to WCAG success criteria but are industry-accepted practices that improve the user experience. One of these rules is "accesskeys", which ensures every accesskey attribute value is unique.

Additional reading: Best Free Wysiwyg Html Editor

Another important rule is "aria-valid-attr-value", which checks if ARIA state or property has a valid value. Axe DevTools Pro implements this rule using the aria-valid-attr-value procedure, which is fully consistent with the WCAG 2 rule.

Here are some specific rules that are part of the Best Practices Rules:

These rules are essential for ensuring your website is accessible to everyone. By following these guidelines, you can create a more inclusive and user-friendly experience for your visitors.

Manual testing with screen readers like JAWS, NVDA, and VoiceOver is sometimes still required to ensure all potential issues have been addressed.

These screen readers are used by many people with low or no vision, making them essential for accessibility testing.

Automated and semi-automated tests can eliminate a large percentage of issues that may affect screen readers, but manual testing is still necessary.

JAWS, NVDA, and VoiceOver are three very popular screen readers that can't be replaced by automated testing alone.