WCAG 2.2 Demo Suite

2.1.4 Level A Guideline 2.1 Keyboard Accessible Added in WCAG 2.1 Not detectable automatically

Character Key Shortcuts

If a shortcut uses only letter, punctuation, number, or symbol characters, it can be turned off, remapped, or is active only when the relevant component has focus.

Who this affects

Speech input users, whose dictated words fire single-key shortcuts at random. Users with tremor who strike keys accidentally.

The failure and the fix

Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.

Fails 2.1.4

Open the failing example in a new tab

fail.html — the problem

<h1>Catalogue</h1>

<!-- FAILURE: single-character shortcuts bound to the whole document, always
     active, with no way to switch them off or remap them.

     Who this breaks: a speech-input user dictating "send this to Sam" fires
     S, then N, then D as commands. A user with tremor brushing the keyboard
     triggers them at random. Neither can turn them off.

     There is no setting to disable them and no modifier key required. -->
<p>Keyboard shortcuts: <kbd>S</kbd> search, <kbd>N</kbd> new list, <kbd>D</kbd> delete list.</p>

<div class="field">
  <label for="note">Notes about this list</label>
  <textarea id="note"></textarea>
</div>

<p id="log" role="status">No shortcut used yet.</p>

Meets 2.1.4

Open the passing example in a new tab

pass.html — the fix

<h1>Catalogue</h1>

<!-- FIX: 2.1.4 is satisfied by ANY ONE of three routes:
       1. let the user turn the shortcuts off, or
       2. let the user remap them to include a modifier key, or
       3. make them active only while the relevant component has focus.

     This example uses route 1 (an off switch) and, crucially, also ignores
     keystrokes while the user is typing in a field - which is the bug that
     makes most shortcut implementations unusable even for people without
     disabilities. -->
<p class="field">
  <input type="checkbox" id="enabled" checked>
  <label for="enabled">Enable single-key shortcuts (<kbd>S</kbd>, <kbd>N</kbd>, <kbd>D</kbd>)</label>
</p>

<div class="field">
  <label for="note">Notes about this list</label>
  <textarea id="note"></textarea>
</div>

<p id="log" role="status">No shortcut used yet.</p>

<!-- Note what 2.1.4 does NOT cover: shortcuts that already require a modifier,
     such as Ctrl+S or Alt+N, are outside its scope entirely, because speech
     input and stray keystrokes cannot produce them by accident. -->

How to test it

Identify all single-character shortcuts. Confirm at least one of: a setting to disable them, a setting to remap them to include a modifier, or activation limited to a focused component.

  • Automated

    Shortcut registration happens in script; discovering and testing it requires reading code and manual trial.

    No axe rule maps to this criterion. It has to be checked by a person.

  • Keyboard

    Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.

  • Screen reader

    Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.

  • Visual

    Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.

In the specification