Automated Tools — axe, Lighthouse, and WAVE

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

Axe-core, Lighthouse, and WAVE are the three most widely used automated Accessibility Testingity" >}} testing tools -- each with distinct strengths: axe-core provides deep programmatic rule checking, Lighthouse combines accessibility with performance scores, and WAVE offers visual overlays for educational feedback.

What You'll Learn

You will understand the strengths and use cases of axe-core, Lighthouse, and WAVE, when to use each tool, and how to combine them for maximum automated coverage.

Why It Matters

Different tools catch different types of issues. Axe-core finds the most violations with the fewest false positives. Lighthouse provides a single score for tracking over time. WAVE helps designers understand issues visually. Using all three gives the best coverage.

Real-World Use

A government agency contract requires WCAG AA Compliance. The team uses axe-core in CI for every commit, Lighthouse in their PR checklist for score tracking, and WAVE during design review for visual feedback before development begins.

Tool Selection Flow

flowchart TD
  A[Automated Testing Need] --> B{Context?}
  B -->|CI/CD Integration| C[axe-core]
  B -->|Performance + a11y| D[Lighthouse]
  B -->|Design/Education| E[WAVE]
  C --> F[Run on every commit]
  D --> G[Run on every PR]
  E --> H[Run during design]
  F --> I[Combined Report]
  G --> I
  H --> I

Understanding Each Tool

Axe-core is like a detailed code linter for accessibility. It checks over 50 rules based on WCAG success criteria and returns structured JSON results. Lighthouse is like a report card that grades accessibility alongside performance, SEO, and best practices. WAVE is like a highlighter pen that shows issues directly on the page.

<!-- A page element that each tool would check differently -->
<form>
  <label for="email">Email address</label>
  <input type="email" id="email" name="email">
  <button type="submit">Sign up</button>
</form>

Axe-core checks that labels are properly associated. Lighthouse checks that the form has discernible names. WAVE shows the label-input relationship visually.

/* Axe-core checks this for color contrast */
button {
  background: #007bff;
  color: #fff;
  /* Axe-core reports contrast ratio: 4.2:1 */
}

// Running axe-core programmatically
const AxeBuilder = require('@axe-core/webdriverjs');
const driver = new Builder().forBrowser('chrome').build();

driver.get('https://example.com').then(() => {
  new AxeBuilder(driver).analyze((err, results) => {
    console.log(`Violations: ${results.violations.length}`);
    console.log(`Passes: ${results.passes.length}`);
  });
});

Common Mistakes

• Relying on only one automated tool
• Ignoring false positives instead of configuring rules
• Running tools only on the homepage
• Not understanding what each tool checks vs misses
• Treating automated results as a complete audit
• Using outdated versions of tools
• Not configuring tool rules for project-specific needs

Practice and Challenge

Practice 1: Install the axe-core browser extension and scan a page. Report three violations. Practice 2: Run a Lighthouse audit and note the accessibility score and opportunities. Practice 3: Install the WAVE browser extension and review the same page. Practice 4: Compare the results from all three tools for one page. Practice 5: Identify which tool found the most issues and which found the fewest.

Challenge: Write a script that runs axe-core CLI on a list of 10 URLs, then parses the results to produce a summary CSV showing pass/fail counts per URL.

FAQ

Mini Project

Create a comparison report for a single page using all three tools. Document the violations found by each tool, the overlap between tools, and which tool caught issues the others missed. Present the findings in a table.

What's Next

axe-core Browser Extension shows how to use the axe-core browser extension in detail.