Lighthouse Setup Guide

Getting Started with Lighthouse

Lighthouse is a free, built-in audit tool in Google Chrome that analyzes webpages for accessibility, performance, SEO, and best practices. Unlike axe DevTools (which is an extension), Lighthouse is part of Chrome DevTools and requires no installation—it's ready to use immediately.

Open Chrome DevTools

Open a checkpoint page in Google Chrome. Then open DevTools using one of these methods:

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

DevTools will open at the bottom or side of your Chrome window.

Navigate to the Lighthouse Tab

Look for the "Lighthouse" tab at the top of DevTools. If you don't see it immediately, look for a » menu (double arrow) to the right of the tab list. Click that menu to reveal additional tabs, and select "Lighthouse".

Select the Accessibility Category

The Lighthouse panel has several categories: Performance, Accessibility, Best Practices, and SEO. Check the Accessibility checkbox to focus on WCAG compliance. You can uncheck the others if you want a faster audit, or leave them checked to audit multiple aspects.

Run the Audit

Click the button labeled "Analyze page load" or "Generate report" (button label varies by Chrome version). Lighthouse will scan the page for 1–2 minutes and then display results.

Review the Results

Results are organized into sections:

• Passed Checks (green): Criteria the page meets.
• Issues (red): Problems that fail WCAG requirements. Click each item to see the HTML element, the rule violated, and suggestions to fix it.
• Manual Checks (yellow): Items that require human judgment. Review these carefully—they're not automatic failures but need your assessment.

Test Multiple Checkpoints

Open different checkpoint pages from this demo (e.g., 1.1.1 Non-text Content or 2.4.7 Focus Visible) and run Lighthouse audits on each. Compare the "Fail" and "Pass" modes to see which issues appear and disappear. This shows how specific code changes affect the audit score.

Interpret the Accessibility Score

Lighthouse displays an overall Accessibility Score (0–100). A higher score indicates fewer detected issues. Note that:

• The score is based on automated checks—some WCAG failures require manual testing (e.g., keyboard navigation, screen reader behavior).
• A page may score well but still have accessibility issues that Lighthouse doesn't detect.
• Intentional "fail" examples in checkpoints will score lower—that's expected.

Helpful Tips

• Run Lighthouse audits in an incognito window to avoid browser extensions interfering with results.
• Test the same page multiple times—network conditions and CPU can affect scores slightly.
• Use Lighthouse alongside manual testing with NVDA and axe DevTools for comprehensive accessibility assessment.
• The "Manual Checks" section often highlights important items like focus visibility that require human verification—don't skip these.
• Lighthouse is especially useful for checking heading structure, alt text, and color contrast, which are common WCAG failures.