Keyboard Access and Single-Key Shortcuts

WCAG 2.1.1 requires functionality to work through a keyboard interface unless it depends on a path-based input. WCAG 2.1.2 requires users to be able to move focus away from any component they can enter, or be told how to use a non-standard exit. WCAG 2.1.4 applies when a shortcut uses only a printable character: users must be able to turn it off, remap it to include a modifier, or limit it to when the relevant control has focus.

Native controls should be the default. Composite widgets need their documented keyboard model, but APG conventions are not themselves WCAG text. role="application" is exceptional and does not repair incomplete keyboard behavior.

document.addEventListener('keydown', event => {
  if (event.key.toLowerCase() === 'b') toggleBold()
})
panel.addEventListener('keydown', event => { if (event.key === 'Tab') event.preventDefault() })

editor.addEventListener('keydown', event => {
  if (event.altKey && event.key.toLowerCase() === 'b') {
    event.preventDefault()
    toggleBold()
  }
})
// Tab is not intercepted, so focus can leave normally.

Keyboard test matrix

Reach every control using only the keyboard, operate it, reverse or cancel where applicable, and leave it. Verify visible DOM focus rather than a virtual cursor. Test printable shortcuts while dictating into fields because speech input can unintentionally trigger single-character commands.

Resources

• Understanding 2.1.1 Keyboard 
• Understanding 2.1.2 No Keyboard Trap 
• Understanding 2.1.4 Character Key Shortcuts 
• Focus Management