Lighthouse Accessibility Audit — Complete Guide

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

Lighthouse is an open-source automated auditing tool that generates an accessibility score between 0 and 100 based on axe-core rules, with detailed opportunities, diagnostics, and guidance for each failed audit.

What You'll Learn

You will run Lighthouse audits in Chrome DevTools, from the command line, and in CI/CD, interpret the accessibility score and audit results, and use Lighthouse CI to track scores over time.

Why It Matters

Lighthouse provides a single accessibility score that teams can track as a key performance indicator. Combined with performance and SEO scores, it gives a holistic view of site quality in one report.

Real-World Use

A product team sets a Lighthouse accessibility score target of 90. Every Pull Request is tested with Lighthouse CI, and if the score drops below 90, the PR is blocked. Over three months, the team raises their score from 65 to 94.

Lighthouse Audit Flow

flowchart TD
  A[Lighthouse Audit] --> B[Categories]
  B --> C[Performance]
  B --> D[Accessibility]
  B --> E[Best Practices]
  B --> F[SEO]
  D --> G[Audit Items]
  G --> H[Contrast]
  G --> I[Labels]
  G --> J[ARIA]
  G --> K[Touch Targets]
  H --> L[Score Calculation]
  I --> L
  J --> L
  K --> L

Running Lighthouse

Lighthouse is built into Chrome DevTools. Open the Lighthouse tab, select categories, and generate a report. For automated use, install Lighthouse CLI.

# Install Lighthouse CLI globally
npm install -g lighthouse

# Run an accessibility-only audit
lighthouse https://example.com --only-categories=accessibility --output=json

# Run with Chrome flags for headless CI
lighthouse https://example.com --chrome-flags="--headless" --output-path=report.html

// Programmatic Lighthouse audit
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

async function runAudit(url) {
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
  const results = await lighthouse(url, {
    port: chrome.port,
    onlyCategories: ['accessibility'],
    output: 'json'
  });
  const a11yScore = results.lhr.categories.accessibility.score * 100;
  console.log(`Accessibility score: ${a11yScore}`);
  await chrome.kill();
  return results;
}

<!-- Lighthouse checks this for ARIA and labels -->
<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
  </ul>
</nav>

Common Mistakes

• Treating a perfect Lighthouse score as full accessibility
• Running Lighthouse only on the homepage
• Ignoring the diagnostic section in favor of the score
• Running Lighthouse on unauthenticated pages only
• Not setting a baseline score for tracking improvements
• Using the mobile emulation setting without testing real devices
• Forgetting to run Lighthouse on key user flows, not just pages

Practice and Challenge

Practice 1: Run a Lighthouse audit on your site from Chrome DevTools. Practice 2: Run Lighthouse CLI on three different URLs and compare scores. Practice 3: Implement the top three accessibility opportunities from a Lighthouse report. Practice 4: Create a Lighthouse CI configuration for your project. Practice 5: Track your accessibility score weekly for one month.

Challenge: Set up Lighthouse CI with GitHub Actions that runs on every pull request, posts the score as a comment, and fails if the score drops by more than 5 points from the baseline.

FAQ

Mini Project

Set up a Lighthouse CI project that tracks accessibility scores across five key pages. Configure a dashboard that shows score trends over the last 30 builds with a minimum score threshold of 85.

What's Next

WAVE Evaluation Tool covers using WAVE for visual accessibility issue detection.