Complete
Accessibility · WCAG 2.1 · UX Strategy

Accessibility
Audit

Lighthouse scored this site 87. That felt close to perfect. Running a manual WCAG 2.1 review alongside it revealed 11 more issues the tool couldn't see — and led to a process worth keeping.

Lighthouse caught values. Manual review caught what was missing.

Lighthouse identified 11 elements with contrast failures — precise, element-level detail. That was the only failing audit. Manual WCAG 2.1 review found 11 additional issues with zero Lighthouse penalty: no skip link, no <main> landmark, hamburger menu reporting wrong state to screen readers, no keyboard focus styles, animations ignoring motion preferences, decorative elements read aloud unnecessarily.

All 16 issues were fixed across two files — style.css and index.html — and deployed. Lighthouse re-run: 100/100.

"A perfect score is reachable with contrast fixes alone. Real usability requires both tools and human judgment."

A repeatable process for accessibility in vibe coding.

Neither AI nor automated tools alone are enough. But used together at the right moments, they cover each other's blind spots. This is the workflow that came out of this audit.

Accessibility Process for Vibe Coders

When to use what — and why it matters.

When building

Tell AI to include accessibility from the start

Prompt with accessibility requirements upfront. It's far cheaper to build right than to fix later. AI can wire all of this in on the first pass if you ask.

skip link <main> landmark aria-expanded :focus-visible prefers-reduced-motion WCAG AA contrast
During development

Run Lighthouse — takes 5 minutes

Chrome DevTools → Lighthouse → check Accessibility score and failing audits. Fast, measurable, and catches contrast issues with exact element selectors. Good for quick iteration checks.

Before launch

Ask AI to do a manual WCAG review

Share the HTML source and ask for a WCAG 2.1 AA review. AI catches what Lighthouse can't: missing landmarks, incorrect dynamic ARIA state, structural issues, and anything that only makes sense in context.

Always

Do a 10-minute human check

Tab through the page with a keyboard — can you see where focus is? Does the order make sense? Turn on VoiceOver (Mac: Cmd + F5) and listen for 2 minutes. No tool replaces this. Neither does AI.

Google Lighthouse WCAG 2.1 AA Manual Code Review HTML · CSS · JS Claude Code Netlify