Lesson 7: Accessibility Deep Dive
Validate primitive behavior with practical keyboard and screen-reader audits, and learn common failure modes.
Lesson 7 of 10: Primitives reduce accessibility work, but they do not remove responsibility.
What primitives handle automatically
For dialog-like patterns, primitives provide:
- dialog role and structural semantics,
- label/description linkage,
- trigger state attributes,
- focus trap and restoration,
- escape/outside dismissal patterns.
This baseline is strong, but wrappers can still break it.
Most common breakages
- Missing or meaningless dialog title.
- Icon-only actions without
aria-label. - Incorrect use of tooltip for interactive content.
- Moving interactive nodes outside intended focus/layer boundaries.
- Preventing default on dismissal events without alternative close path.
Manual keyboard audit script
For each overlay component:
- Focus trigger with Tab.
- Activate with Enter or Space.
- Traverse all controls with Tab and Shift+Tab.
- Close with Escape.
- Confirm focus returns to expected anchor.
If any step fails, block release.
Screen reader audit script
Verify with VoiceOver or NVDA:
- Trigger announces intent.
- Dialog/menu role is announced.
- Title/description are meaningful.
- Item states (checked/selected/disabled) are communicated.
Do not rely on visual inspection as proof.
Inspecting semantics in DevTools
Use browser accessibility tooling to verify:
- computed role,
- accessible name,
- accessible description,
- state attributes.
This catches wrapper-level mistakes quickly.
Accessibility release checklist
- All modal surfaces have titles.
- All icon buttons have labels.
- Escape closes where expected.
- Focus never gets lost after close.
- Reduced-motion path is usable.
- Color and contrast checks pass for all states.
Lab
- Audit your dialog, popover, and menu wrappers with keyboard only.
- Run a screen-reader pass and document announcements.
- Fix at least one issue found and note root cause.