axe-core Browser Extension — Complete Guide

In this tutorial, you will learn about axe. We cover key concepts, practical examples, and best practices to help you master this topic.

The axe-core browser extension adds an Accessibility tab to browser DevTools, allowing you to run on-demand scans on any page, review violations with impact levels and fix guidance, and export results as JSON or CSV for documentation.

What You'll Learn

You will install the axe-core browser extension, run scans on live pages, interpret violation results, filter by WCAG level and impact, and export findings for reporting.

Why It Matters

The browser extension provides instant accessibility feedback without any setup or configuration. Designers, QA testers, and developers can scan any page at any time -- including staging, production, and competitor sites.

Real-World Use

A QA tester receives a build to verify. They open the page, open DevTools, click the Accessibility tab, and run an axe scan. Three violations appear: a missing label, insufficient contrast, and a missing heading level. The tester exports the results and attaches them to the bug report.

Scan Workflow

flowchart TD
  A[Open DevTools] --> B[Accessibility Tab]
  B --> C[Click Scan]
  C --> D[Review Results]
  D --> E{Choose Action}
  E -->|Fix now| F[Edit code]
  E -->|Document| G[Export JSON]
  F --> H[Re-scan]
  G --> H

Using the Extension

Installing the extension adds an Accessibility panel to your browser DevTools. Click Scan to analyze the current page. Results appear grouped by impact level: critical, serious, moderate, and minor.

<!-- A violation the extension would catch -->
<img src="chart.png">
<!-- Missing alt attribute -- flagged as critical -->

The extension tells you exactly which WCAG criterion is violated, why it matters, and how to fix it.

/* Another violation: insufficient contrast */
.light-text {
  color: #999;
  background: #fff;
  /* Contrast ratio: 2.8:1 -- fails AA */
}

// The extension does not require code, but you can
// automate axe-core in tests with the same engine
const axe = require('axe-core');
document.addEventListener('DOMContentLoaded', () => {
  axe.run(document, (err, results) => {
    console.log(results.violations);
  });
});

Common Mistakes

• Scanning only the homepage
• Ignoring critical violations because they seem hard to fix
• Running scans before the page is fully loaded
• Not filtering results by WCAG level for Compliance reporting
• Forgetting to re-scan after fixes
• Treating zero violations as complete accessibility
• Not using the highlight feature to locate issues visually

Practice and Challenge

Practice 1: Install the axe-core extension and scan your portfolio site. Practice 2: Filter results to show only WCAG AA violations. Practice 3: Export the scan results as JSON and open them in a text editor. Practice 4: Fix one critical violation and re-scan to confirm. Practice 5: Scan a competitor's site and document three issues.

Challenge: Scan five different page types (home, product, checkout, blog, contact) with the extension. Create a table showing which violations appear across multiple pages and which are page-specific.

FAQ

Mini Project

Create an Accessibility Testing checklist that uses the axe-core extension for initial scans. For each page type in a typical e-commerce site, list which violations the extension is likely to find and what manual tests must supplement the automated results.

What's Next

axe-core CLI covers running axe-core from the command line for CI/CD integration.