Fix the remaining accessibility failures that Lighthouse finds
Why it matters
The Lighthouse accessibility score is below the good range, so a few problems still stop some visitors, such as images without alt text or text that is hard to read. Fixing the failing audits is usually quick work.
The fix
- Run Lighthouse (in Chrome DevTools, or through PageSpeed Insights) on the page and open the Accessibility section. Fix the failing audits one by one, starting with those it lists first, because they affect the most people.
- Give every meaningful image an alt text that says what the image shows or does, and an empty alt="" to decorative ones. Give every form field a visible label, and every button and link a name that makes sense on its own (not "click here").
- Check colour contrast. Normal text needs a contrast ratio of at least 4.5 to 1 against its background, and large text (about 24 pixels, or 19 pixels bold) needs 3 to 1. Do not rely on colour alone to carry meaning.
- Set the page language on the html element, give each page a unique title, use headings in order (one h1, then h2 and h3), and use real buttons and links instead of clickable divs.
- Test by hand as well. Tab through the page with the keyboard only and check that focus is visible and in a sensible order, and try a screen reader on the main paths. Automated tests find only part of the problems.
html
<html lang="en"> <head><title>Contact us | Example company</title></head> <body> <img src="/img/team.jpg" alt="Our team of six in the workshop"> <img src="/img/divider.svg" alt=""> <label for="email">Email address</label> <input id="email" name="email" type="email" autocomplete="email"> <button type="submit">Send message</button> <button type="button" aria-label="Open menu"><svg aria-hidden="true">...</svg></button> <a href="/shipping">Read our shipping and returns policy</a> </body> </html>
Related
Scan your domain to see whether this applies to you.