Accessibility Specialist Path
A staged path to frontend accessibility depth — WCAG, semantics, complex widgets, testing, and shipping a11y in real products.
- roadmaps
- accessibility-specialist
This path turns “I know alt text” into shipping accessible products and interviewing as the a11y-strong engineer on a FE team. Sequence matters: semantics before ARIA gymnastics.
Who this is for
- FE engineers owning design-system components
- Candidates preparing for a11y-heavy loops
- Teams that need a practical training order
General FE path: Frontend roadmap. Interview map: Accessibility talking points.
Stage 0 — Mindset & law of the land
Goals: POUR model; accessibility is UX quality, not a phase.
Checkpoint: Explain POUR with one product bug each.
Stage 1 — Semantic HTML foundations
Goals: Prefer native elements; correct document outline.
- HTML semantics · Landmarks
- Headings outline · Heading hierarchy a11y
- Links vs buttons
- Forms labels · Accessible forms
- Images alt
- Tables for data · Accessible tables
- Skip links
Checkpoint: Audit a page; replace 5 div controls with native elements.
Stage 2 — Keyboard & focus
Goals: Full critical path without a mouse.
Checkpoint: Keyboard-only checkout or settings flow; no traps.
Stage 3 — Names, states, ARIA
Goals: ARIA only when HTML is insufficient.
- Accessible names computation
- ARIA labels and descriptions
- ARIA roles overview
- ARIA live regions
- Do not rely on color alone
- Color contrast
Checkpoint: Fix a custom control’s name/state so VoiceOver/NVDA announces correctly.
Stage 4 — Complex widget patterns
Goals: Implement APG-grade widgets.
| Widget | Learn | Build |
|---|---|---|
| Modal | Accessible modals | Machine coding modal |
| Tabs | Accessible tabs | Tabs in your DS |
| Combobox | Combobox | Autocomplete |
| Menu | Menus | App nav |
| SVG | Accessible SVGs | Icon button set |
React angle: Accessibility patterns in React.
Checkpoint: Two widgets with full keyboard maps + SR pass notes.
Stage 5 — Motion, media, content
- Reduced motion · prefers-reduced-motion CSS
- Inclusive error messages
- Audio/video elements (captions awareness)
Checkpoint: Respect reduced motion in a non-trivial animation.
Stage 6 — Testing & CI
- Screen reader testing basics
- Automated axe limits
- A11y testing in CI
- Manual keyboard + one SR on PRs for widget changes
Checkpoint: CI fails on new serious axe violations; document manual exceptions.
Stage 7 — Org & design systems
- Component API: a11y props documented
- Tokens for contrast
- Design systems path
- Accessibility in large apps
Checkpoint: RFC or checklist your team adopts for new components.
Stage 8 — Interview readiness
- A11y interview talking points
- Whiteboard a combobox/modal — Whiteboarding UI
- Story: fixed a production a11y incident — Behavioral stories
What to skip early
- Memorizing every ARIA role before keyboard mastery
- Custom everything when native works
- Automated-only testing
Progress tracking
Mark a stage done only when the checkpoint is shipped or demoed. Reading APG without a widget does not count.
Related on this site
- Accessibility hub topics (filter accessibility)
- Interview hub
- Frontend roadmap
- Machine coding hub
Further reading
Accessibility skill compounds when every component PR assumes keyboard and SR users exist.