2.1.4 Character Key Shortcuts

Level: A | Principle: Operable | Since: WCAG 2.1 | Automation: Manual


What This Means

If a keyboard shortcut uses only a single printable character (letter, number, punctuation, or symbol), then at least one of the following must be true:

  1. Turn off — there is a mechanism to turn the shortcut off
  2. Remap — there is a mechanism to remap the shortcut to use a non-printable modifier key (Ctrl, Alt, etc.)
  3. Active only on focus — the shortcut only works when the relevant component has focus

Single-character shortcuts can be accidentally triggered by speech input users, whose dictation software sends individual key presses.

Who This Affects

  1. Speech input users — voice commands generate keystrokes that can accidentally trigger single-key shortcuts
  2. Users with motor disabilities — may accidentally press keys and trigger unintended actions
  3. Keyboard users — single-character shortcuts conflict with native browser or assistive technology shortcuts

Common Pitfalls

1. Global single-key shortcuts

// Bad: "s" triggers search globally — speech users constantly trigger this
document.addEventListener('keydown', (e) => {
  if (e.key === 's') openSearch();
  if (e.key === 'n') nextItem();
  if (e.key === 'p') previousItem();
});

2. No way to disable or remap shortcuts

Many web apps implement Gmail-style single-key shortcuts (j/k for navigation, r for reply) without a settings panel to disable them.

How to Fix

Use modifier keys for global shortcuts

// Good: require a modifier key
document.addEventListener('keydown', (e) => {
  if (e.ctrlKey && e.key === 'k') openSearch();
});

Provide a settings panel to disable shortcuts

// Good: user can disable single-key shortcuts
const settings = { keyboardShortcuts: true };

document.addEventListener('keydown', (e) => {
  if (!settings.keyboardShortcuts) return;
  if (e.key === 'j') nextItem();
});

Limit shortcuts to focused components

// Good: shortcut only works when the list has focus
listElement.addEventListener('keydown', (e) => {
  if (e.key === 'j') nextItem();
  if (e.key === 'k') previousItem();
});

How to Test

  1. Click somewhere on the page body (not in a form field) and press each letter key (a-z), number key (0-9), and common symbol keys one at a time without holding any modifier.
  2. Note any action that triggers from a single character key press (e.g., navigation, search opening, item selection).
  3. For each single-key shortcut found, check the application settings or help documentation for an option to disable or remap it.
  4. Verify that any single-key shortcut is either limited to a focused component (only works when that widget has focus) or can be turned off globally.
  5. Pass: No single-character shortcuts exist, or each can be turned off, remapped to include a modifier key, or is active only when its component has focus.
  6. Fail: A single-character shortcut triggers a global action with no way to disable, remap, or scope it to a focused component.

axe-core Rules

No automated axe-core rules. This criterion requires manual testing.

Sources

  1. W3C WCAG 2.2 — Understanding 2.1.4
  2. W3C Technique F99: Failure due to implementing character key shortcuts that cannot be turned off or remapped