Fix the failing accessibility audit

a11y.lighthouse.audit_failed · effort: about an hour

Why it matters

Lighthouse found a specific accessibility audit that this page fails, listed in the finding. Each audit points at elements that some visitors cannot use, and the report names them.

The fix

Run Lighthouse in Chrome DevTools, open the audit named in the finding and expand it. It lists the elements that fail, with a snippet and a selector for each, and a link to an explanation of the fix.
Typical fixes by audit. For image-alt, add alt text. For button-name and link-name, give the control readable text or an aria-label. For label, connect a label to every input. For color-contrast, darken the text or lighten the background until the ratio reaches 4.5 to 1 (3 to 1 for large text). For html-has-lang, add a lang attribute to html.
Other common ones are document-title (add a title), heading-order (do not skip heading levels), meta-viewport (remove user-scalable=no) and aria-* audits (use only valid ARIA roles and attributes, and prefer native elements).
Run Lighthouse again to see that the audit passes, and test by hand with the keyboard.

html

<!-- image-alt -->
<img src="/img/chair.jpg" alt="Oak dining chair with a woven seat">

<!-- button-name and link-name -->
<button type="button" aria-label="Close dialog">&times;</button>
<a href="/cart" aria-label="Shopping cart, 2 items"><svg aria-hidden="true">...</svg></a>

<!-- label -->
<label for="q">Search the shop</label>
<input id="q" name="q" type="search">

<!-- color-contrast: use a darker colour on the white background (ratio above 4.5 to 1) -->
<style>
  .note { color: #595959; background: #ffffff; }
</style>

<!-- meta-viewport: keep zooming possible -->
<meta name="viewport" content="width=device-width, initial-scale=1">

Read the documentation (opens in a new tab)

Scan your domain to see whether this applies to you.

Why it matters

The fix

Related