11 · Engineering craft
Accessibility
Semantics, ARIA, and keyboard-first interfaces.
Increasingly a scored dimension in system-design and machine-coding rounds. "Make it keyboard-accessible" is a common curveball.
Foundations
| Topic | Difficulty | Time | Tags | Best Resources |
|---|---|---|---|---|
| Semantic HTML first | 🟢 | 45m | #html #basics |
web.dev: structure ⭐ |
| WCAG & POUR principles | 🟡 | 1h | #wcag |
W3C: WCAG at a glance ⭐ |
| The accessibility tree | 🟡 | 45m | #internals |
web.dev: a11y tree ⭐ |
| Screen readers (how they work) | 🟡 | 45m | #screen-readers |
web.dev ⭐ |
| Color contrast | 🟢 | 30m | #color #wcag |
web.dev: contrast ⭐ |
| Text alternatives (alt, labels) | 🟢 | 30m | #basics |
web.dev ⭐ |
ARIA & interaction
| Topic | Difficulty | Time | Tags | Best Resources |
|---|---|---|---|---|
| ARIA roles, states, properties | 🔴 | 1.5h | #aria |
MDN: ARIA ⭐ |
| ARIA Authoring Practices (patterns) | 🔴 | 1.5h | #aria #patterns |
ARIA APG patterns ⭐ |
| When NOT to use ARIA | 🟡 | 30m | #aria |
W3C: first rule of ARIA ⭐ |
| Keyboard navigation & tab order | 🟡 | 1h | #keyboard |
web.dev: keyboard ⭐ |
| Focus management | 🔴 | 1h | #focus |
MDN ⭐ |
| Focus trapping (modals) | 🔴 | 45m | #focus #dialog |
ARIA APG: dialog ⭐ |
| Live regions & announcements | 🔴 | 45m | #aria #dynamic |
MDN: live regions ⭐ |
| Skip links & landmarks | 🟢 | 30m | #navigation |
web.dev ⭐ |
Reduced motion & prefers-* |
🟡 | 30m | #motion |
web.dev ⭐ |
Accessible components
| Topic | Difficulty | Time | Tags | Best Resources |
|---|---|---|---|---|
| Accessible forms | 🟡 | 1h | #forms |
web.dev: forms ⭐ |
| Accessible dialogs / modals | 🔴 | 1h | #dialog |
ARIA APG: dialog ⭐ |
| Accessible menus & comboboxes | 🔴 | 1h | #aria #patterns |
ARIA APG: combobox ⭐ |
| Accessible tabs | 🟡 | 45m | #patterns |
ARIA APG: tabs ⭐ |
| Accessible tables | 🟡 | 45m | #tables |
ARIA APG: table ⭐ |
| Accessible carousels | 🔴 | 45m | #patterns |
ARIA APG: carousel ⭐ |
Testing
| Topic | Difficulty | Time | Tags | Best Resources |
|---|---|---|---|---|
| Automated a11y testing (axe) | 🟡 | 45m | #testing #tooling |
Deque axe ⭐ |
| Manual testing with a screen reader | 🟡 | 45m | #testing |
web.dev ⭐ |
❓ Rapid-fire accessibility interview questions
Real a11y questions asked at the SDE-2 / senior level. Answer out loud, then verify above.
- What is semantic HTML and why does it matter for accessibility?
- What is ARIA and when should you not use it?
- What is the accessibility tree?
- How do you make a custom component keyboard accessible?
- What is focus management and focus trapping?
- What is an ARIA live region and when do you use it?
- What are WCAG's POUR principles?
- What color contrast ratio does WCAG require?
- How do you make a modal accessible?
- How do you test accessibility (automated + manual)?
- Difference between
aria-hiddenanddisplay:none? - How do screen readers work?
- What is a skip link and why add one?
- How do you respect
prefers-reduced-motion? - How do you label form inputs accessibly?
Related: 05-css · 16-machine-coding · 14-testing
Missing something? Add a row.