a11y/no-keyboard-trap

Why

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.

Fix

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").

Examples

// 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()

Sources

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

Read it in the terminal

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