What is it?
Accessibility (a11y) is making the web usable by people with disabilities — and by extension, easier for everyone. It covers four broad areas: perceivable (can users sense it?), operable (can they interact?), understandable (does it make sense?), and robust (does it work across tools?). The Web Content Accessibility Guidelines (WCAG) put numbers on each.
Why it matters
A11y is legally required for many companies and ethically table-stakes for everyone else. Hiring managers actively filter for candidates who mention it unprompted. Most a11y wins come from semantic HTML and a few ARIA attributes — not from a separate engineering pass.
What to learn
- The four WCAG principles: POUR (perceivable, operable, understandable, robust)
- Semantic HTML as the foundation — ARIA is for what HTML can't express
- Keyboard navigation: Tab order, focus rings,
:focus-visible - Color contrast: 4.5:1 for body text, 3:1 for large text
- Screen reader basics: how AT reads landmarks, headings, and forms
- ARIA: roles, states, properties — and the rule of "no ARIA is better than wrong ARIA"
Common pitfall
Slapping aria-label on everything. ARIA overrides the accessibility
tree, and incorrect ARIA breaks AT in ways visual users never see. Start
with semantic HTML, test with a screen reader, and only add ARIA when
the platform genuinely doesn't have a tag for what you mean.
Resources
Primary (free):
- MDN — Accessibility · docs
- web.dev — Learn Accessibility · docs
- WAI-ARIA Authoring Practices · docs
Practice
Pick any page from a recent project. Unplug the mouse and tab through it.
Note every place where focus disappears, gets stuck, or skips the wrong
element. Fix the top three with semantic HTML or tabindex. Done when
you can complete every primary task on the page using only the keyboard.
Outcomes
- Tab through any page and identify focus traps without a tool.
- Pick a color pair that meets WCAG AA contrast without a calculator.
- Run a screen reader (VoiceOver, NVDA, or Narrator) for five minutes without flinching.
- Decide when ARIA is needed and when semantic HTML already covers it.