a11y/no-keyboard-trap

Dlaczego

A trap ends the visit for someone who uses only a keyboard: they cannot reach anything else and must reload. Traps come from custom focus loops, embedded editors and players, and modals whose trap stays on after closing.

Poprawka

Tab through the whole page once by hand. A focus loop belongs only to an open modal (<dialog> opened with showModal() does it for you) and ends when it closes. Code editors and players that use Tab themselves must say how to leave (for example "press Escape, then Tab").

Przykłady

// bad: a keydown handler that always sends Tab back to the first field
form.addEventListener('keydown', (e) => { if (e.key === 'Tab') { e.preventDefault(); first.focus() } })
// good: no handler; or a trap only inside an open modal dialog
dialog.showModal()

Źródła

• WCAG 2.2, Understanding SC 2.1.2 No Keyboard Trap
• WAI-ARIA Authoring Practices, Developing a Keyboard Interface

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain a11y/no-keyboard-trap