Stuck in a Focus Trap
summary
Shows that a custom modal implementation fails common accessibility checks while the native dialogue element passes all four tested behaviors: opens, traps focus, puts focus on the first control, closes with Escape and returns focus to the opener. Demonstrates a resilient Oreo focus style (multiple rings) that stays visible on varied backgrounds, uses the built‑in color picker and radio/checkbox keyboard behaviors, and explains tabindex values (0, -1, positive) with the recommendation to avoid positive tabindex in favor of careful DOM order.
AI-written summary · about
chapters (18)
- 0:00Keyboard accessibility intro
- 1:08Web use with keyboard
- 3:18Focus rings in action
- 7:20Keyboard navigation basics
- 9:09Good focus style
- 12:25Interactive elements focus
- 14:33Testing with radio buttons
- 16:40JS focus pitfalls
- 17:02Focus trap explained
- 20:15Custom vs HTML dialogue traps
- 23:31Testing focus traps
- 24:17HTML tabindex explained
- 28:58When to use tabindex -1
- 30:20Risks of tabindex >0
- 30:40Focus management summary
- 31:43Q&A on SPAs
- 34:33WCAG focus standards
- 36:18Skip links importance
