Accessibility isn't charity — it's 15% of users, an SEO factor, and legally required in many markets. Ten fixes cover most failures.
The checklist
- 1. alt on every image — describe function, not appearance. Decorative:
alt="" - 2. Labels on every input —
<label for="email">; placeholders vanish on focus - 3. Real buttons and links — clickable divs get no keyboard/screen-reader support for free
- 4. Contrast 4.5:1 — check with DevTools color picker (it shows the ratio)
- 5. Never remove focus outlines without replacing:
:focus-visible { outline: 2px solid } - 6. Heading order h1→h2→h3 — screen readers navigate by it
- 7. Keyboard test: Tab through your page — can you reach and use everything?
- 8. ARIA only where HTML can't:
aria-label="Close"on ✕ buttons,aria-expandedon toggles,role="alert"for errors - 9.
lang="en"on html; form errors as text, not just red borders - 10. Run Lighthouse accessibility audit — it catches the rest
First rule of ARIA: don't use ARIA when a native element works. <button> beats <div role="button" tabindex="0"> every time.