Operable · 2.1 Keyboard Accessible
If the content implements a keyboard shortcut that uses only letter, punctuation, number or symbol keys, users must be able to turn it off, remap it to include a non-printable key such as Ctrl or Alt, or it must be active only when its component has focus.
Live demo
The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.
Press Simulate speech input in each version and watch the messages. In Passes, tick Turn off single-key shortcuts and try again.
Shortcuts: A archives, D deletes and R replies.
Shortcuts: A archives, D deletes and R replies.
The tools follow the version you last used.
What happened
Why it passes
The shortcuts are there for people who want them, and one tick turns them off, so the letters in spoken words stay as words.
Why it fails
Every A, D or R in a spoken phrase is taken as a command, so messages get archived or deleted by accident and nothing turns the shortcuts off.
Examples
Four examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.
Fails
Live preview
document.addEventListener("keydown", (event) => { if (event.key === "a") archiveSelectedMessage(); if (event.key === "d") deleteSelectedMessage(); if (event.key === "r") replyToSelectedMessage();});Single letters act anywhere on the page and cannot be turned off. A speech input user who says a word with a d in it can delete a message.
Passes
Live preview
// <input type="checkbox" id="letter-shortcuts" checked>// <label for="letter-shortcuts">Single-key shortcuts</label>const shortcutsOn = document.getElementById("letter-shortcuts");document.addEventListener("keydown", (event) => { if (!shortcutsOn.checked) return; if (event.target.closest("input, textarea, [contenteditable]")) return; if (event.key === "a") archiveSelectedMessage(); if (event.key === "d") deleteSelectedMessage(); if (event.key === "r") replyToSelectedMessage();});A setting in the page turns the letter shortcuts off, which the criterion accepts. They also stay quiet while the user is typing in a field.
Fails
Live preview
// Anywhere on the page: K plays or pauses, L skips forward 10 secondsdocument.addEventListener("keydown", (event) => { if (event.key === "k") video.paused ? video.play() : video.pause(); if (event.key === "l") video.currentTime += 10;});The keys work wherever focus is, so a speech input user dictating a comment below the video can pause it or skip ahead by accident.
Passes
Live preview
// <div id="player" role="region" aria-label="Video player" tabindex="0">// wraps the video and its controlsconst player = document.getElementById("player");player.addEventListener("keydown", (event) => { if (event.key === "k") video.paused ? video.play() : video.pause(); if (event.key === "l") video.currentTime += 10;});The keys are handled only while focus is inside the player, which the criterion allows, so typing or speaking elsewhere on the page cannot trigger them.
Why it matters
Speech input users can set off single-key shortcuts by accident when their spoken words arrive as keystrokes, and people with tremor or imprecise typing can trigger them by mistake. Shortcuts that can be disabled or need a modifier prevent unintended actions.
W3C: Understanding 2.1.4Level A
Level A is the minimum: failing it can shut some people out completely.
Where it is required
Required where the law names WCAG 2.1 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Australia and New Zealand.
How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures