Lighthouse Accessibility Score Low
Lighthouse is the detection tool itself. Access via Chrome DevTools > Lighthouse tab, Google PageSpeed Insights (pagespeed.web.dev), or programmatically via the lighthouse npm package.
Why it matters
Lighthouse is Google's open-source automated auditing tool built into Chrome DevTools. It calculates an Accessibility score from 0–100 based on a subset of WCAG criteria evaluated by the axe-core engine. While a score of 100 does not mean full WCAG compliance (automated tools catch ~35% of issues), a low score is a clear signal of systematic accessibility failures. Google's algorithms consider page experience signals, and accessibility is increasingly referenced in best-practice rankings. More importantly, a Lighthouse score below 90 typically indicates dozens of real WCAG violations affecting users with disabilities. Organizations that monitor Lighthouse scores as part of their development workflow catch accessibility regressions before they ship to production.
Symptoms — what you'll see
If your site has this problem, you may observe any of the following:
- Lighthouse accessibility score below 90 (or below 100 for full compliance)
- Chrome DevTools audit showing multiple accessibility violations
- Google PageSpeed Insights flagging accessibility issues
- CI/CD pipeline reporting Lighthouse accessibility failures
- Core Web Vitals report in Google Search Console noting accessibility issues
Common causes
- Missing alt attributes on images (most common — drops score significantly)
- Missing form labels on inputs, selects, and textareas
- Insufficient color contrast across text elements
- Missing or empty page <title> elements
- Missing lang attribute on the <html> element
- ARIA attributes used incorrectly (roles, required children, allowed attributes)
- Empty link and button elements (icon-only without accessible names)
- Lists not using semantic <ul>/<ol>/<li> markup
- Missing landmark elements (<main>, <nav>, <header>)
How to fix it
- 1Run Lighthouse: Chrome DevTools > Lighthouse tab > select Accessibility > Generate report.
- 2Fix "Critical" violations first — they have the most impact on score: missing alt text, missing form labels, ARIA misuse.
- 3Address "image-alt" rule: add alt attributes to all <img> elements (most common high-impact violation).
- 4Fix "label" rule: add <label> elements to all form inputs.
- 5Fix "color-contrast" rule: update text colors to meet 4.5:1 ratio for normal text.
- 6Fix "button-name" rule: add text content or aria-label to all <button> elements.
- 7Fix "link-name" rule: add text content or aria-label to all <a> elements.
- 8Fix "document-title" rule: ensure every page has a unique, descriptive <title> element.
- 9Fix "html-has-lang" rule: add lang="en" (or appropriate language) to the <html> element.
- 10Re-run Lighthouse after each batch of fixes and track score improvement.
Code example
<!-- FAILING: no lang attribute on html -->
<html>
<head>
<title></title> <!-- FAILING: empty title -->
</head>
<body>
<img src="hero.jpg"> <!-- FAILING: no alt -->
<button><!-- icon only --></button> <!-- FAILING: no name -->
<a href="/more"> <!-- FAILING: empty link text -->
<img src="arrow.png">
</a>
</body><!-- FIXED: language declared -->
<html lang="en">
<head>
<title>Products — Acme Co</title> <!-- FIXED: descriptive title -->
</head>
<body>
<img src="hero.jpg" alt="Team collaborating in a modern office">
<button aria-label="Open navigation menu"><!-- icon --></button>
<a href="/more">
<img src="arrow.png" alt="View all products">
</a>
</body>How to test your fix
After applying the fix, verify it works using these testing steps:
- Open Chrome DevTools (F12 or Cmd+Option+I), navigate to Lighthouse tab.
- Select "Accessibility" checkbox only, choose "Mobile" and "Desktop" separately.
- Click "Analyze page load" and wait for the report.
- Review the failing audits grouped by impact (critical, serious, moderate).
- Click each failing audit to see the affected elements and specific guidance.
- Use the "Learn more" link in each audit for detailed WCAG references.
- Run programmatic Lighthouse via: npx lighthouse https://yoursite.com --only-categories=accessibility --output=json
Frequently asked questions
Is a Lighthouse score of 100 the same as WCAG compliance?+
No. Lighthouse's automated checks cover approximately 35% of WCAG 2.1 AA criteria. A score of 100 means you pass all automated checks, but many WCAG violations (keyboard navigation, reading order, complex widget interaction, cognitive accessibility) require manual testing. A score of 100 is a good start, not a compliance guarantee.
What Lighthouse score is considered "good" for accessibility?+
Aim for 95 or above as a minimum threshold, 100 as a goal. Scores below 90 indicate multiple serious violations. Note that a score of 95 might hide 2–3 significant violations depending on their weighting in the scoring algorithm. Always review the individual failing audits regardless of the overall score.
Can I automate Lighthouse testing in my CI/CD pipeline?+
Yes. Use the lighthouse npm package or lighthouse-ci (@lhci/cli) to run Lighthouse as part of your build pipeline. Configure assertions to fail the build if the accessibility score drops below a threshold. This catches accessibility regressions before they reach production.
Why did my Lighthouse score drop after a recent update?+
Common causes: new images added without alt text, third-party script injection introducing violations, a CMS plugin update that changed HTML structure, color changes in a design system update, or a React/Vue component update that removed ARIA attributes. Run Lighthouse before and after changes to catch regressions.
Does Lighthouse test mobile accessibility differently from desktop?+
The accessibility checks are largely the same, but viewport and font-size related rules may differ. Run both mobile and desktop reports. Touch target size (WCAG 2.5.5) and viewport meta tag configuration are mobile-specific considerations. The scoring weights may differ slightly between profiles.