Accessibility Basics: What Lighthouse Checks and How to Fix It
An accessible website works for people who use screen readers, keyboards, screen magnifiers, voice control or simply a phone in bright sunlight. Accessibility overlaps heavily with good SEO: text alternatives, clear headings and descriptive links help search engines understand your page too. In many countries, including the EU under the European Accessibility Act, accessibility is also a legal requirement for many businesses.
What we check
We report Lighthouse’s accessibility score (0–100) from the same PageSpeed Insights run (mobile) that measures performance. Lighthouse runs a set of automated audits from the axe-core engine and weights them by impact.
| Result | Score |
|---|---|
| Passed | 90–100 |
| Needs attention | 50–89 |
| Failed | below 50 |
Automated tests catch only part of the problems: they can tell that an image has no alt text, not whether the alt text is meaningful. A score of 100 is a good start, not proof that a site is accessible. Testing with a keyboard and a screen reader is the next step.
To see the individual audits, open your page in PageSpeed Insights or in Chrome DevTools > Lighthouse and look at the Accessibility section.
The most common fixes
Colour contrast. Text needs a contrast ratio of at least 4.5:1 against its background (3:1 for large text). Light grey on white is the classic failure. Most design tools and DevTools show the ratio.
Form labels. Every input needs a label that screen readers can announce:
<label for="email">Email</label> <input id="email" name="email" type="email" autocomplete="email" />
A placeholder is not a label.
Image alt text. Describe what matters in the image; use alt="" for purely decorative images.
See image alt text.
Buttons and links need names. Icon-only buttons need an accessible name:
<button type="button" aria-label="Close menu">
<svg aria-hidden="true"><!-- icon --></svg>
</button>
Heading order. Use one <h1>, then <h2>, <h3> in order, without skipping levels for
styling. See headings.
Page language. Set <html lang="…"> so screen readers pronounce text correctly. See
HTML lang.
Don’t block zoom. user-scalable=no or maximum-scale=1 in the viewport meta tag stops people
from zooming in. See mobile viewport.
Keyboard focus. Never remove focus outlines without replacing them; people who navigate by keyboard need to see where they are.
Further reading: web.dev: Learn accessibility and the WCAG 2.2 quick reference.