Quest 4 · Accessibility audit
Quest 4 · hands-on · ~20 min
🎯 Mission
You start with: your finished recipe page.
You finish with: a Lighthouse accessibility score of 90+.
Quest complete when: Lighthouse shows 90 or more for Accessibility, and you fixed at least one thing it flagged (or confirmed there was nothing).
Step 1 · Run Lighthouse
DevTools → Lighthouse tab → tick only Accessibility → Analyze page load.
✅ You should see: a score out of 100 and a list of failed checks, if any.
Step 2 · Try the keyboard
Click the address bar, then press Tab repeatedly.
✅ You should see: a focus outline moving through the links, inputs and button in reading order. If you can't see it, neither can keyboard users.
Step 3 · Fix and re-run
Common fixes: missing alt, a skipped heading level (h1 → h3), an input without a label, lang missing on <html>. Fix, save, re-run, commit.
💡 What just happened (plain English)
About 1 in 6 people has a disability. Semantic HTML gets you most of the way for free, which is why it came first.
🏁 Checkpoint
- ☐ Lighthouse accessibility ≥ 90
- ☐ I tabbed through the whole page
- ☐ committed and pushed
🏆 Tick every box → achievement unlocked: Everyone's Welcome (+50 XP)