axe DevTools Setup Guide

Getting Started with axe DevTools

axe DevTools is a free browser extension for Chrome and Firefox that scans any webpage for accessibility violations and best practices. It helps you identify which checkpoint examples are failing or passing according to the WCAG 2.2 rules.

Install axe DevTools

Visit the official axe DevTools page for installation links:

https://www.deque.com/axe/browser-extensions/

For Chrome, install from the Chrome Web Store. For Firefox, install from the Mozilla Add-ons page. The extension is free and no account is required.

Open Browser DevTools

Once installed, open your browser's Developer Tools using one of these methods:

• Press F12 (Windows) or Cmd+Option+I (Mac).
• Right-click anywhere on the page and select "Inspect" or "Inspect Element".

DevTools will appear as a panel at the bottom or side of your browser window.

Navigate to the axe DevTools Tab

Look for the "axe DevTools" tab in the DevTools panel (you may need to click the » menu to find it if there are many tabs). Click on the tab to open the axe scanner.

Run a Scan

Click the "Scan" button in the axe panel. The scanner will analyze the current page for accessibility issues. It typically takes a few seconds. When complete, results appear in categories:

• Violations (red): Issues that fail WCAG criteria.
• Passes (green): Criteria that the page meets.
• Best Practices: Recommended patterns that aren't strict WCAG failures.
• Needs Review (yellow): Items that require manual verification.

Test with Checkpoint Demo

Open a checkpoint page from this demo site (e.g., 1.4.3 Contrast Minimum) and run an axe scan. Notice which violations appear in the "Fail" mode. Toggle the demo to "Pass" and scan again to see violations disappear. This shows exactly which HTML/CSS changes eliminate the issue.

Understanding Intentional Violations

Many violations you see in the "Fail" mode of checkpoints are intentional demonstrations. The pages are designed to show what a failing checkpoint looks like so testers can learn to identify the problem. This is not a bug in the site—it's the point of the checkpoint.

Helpful Tips

• Use axe alongside NVDA (screen reader) and CCA (contrast checker) to verify different aspects of accessibility.
• Click on any violation to see the HTML element, the rule that failed, and remediation advice.
• Export scan results using the download icon for documentation and sharing with team members.
• Run scans after any code changes to ensure new content remains accessible.