Operable · 2.1 Keyboard Accessible
All functionality must be operable through a keyboard interface without requiring specific timing for individual keystrokes, with no exceptions. Unlike 2.1.1, even path-dependent input such as freehand drawing must be achievable from the keyboard.
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.
Using only the keyboard, try to sign and press Confirm signature in each version. The Show tab order button numbers every control that Tab can reach.
Your signature confirms that the parcel arrived undamaged.
Your signature confirms that the parcel arrived undamaged.
The tools follow the version you last used.
What happened
Why it passes
You can still draw with a pointer, but you can also type your name as your signature and use real Clear and Confirm signature buttons, so the keyboard can do everything a mouse can.
Why it fails
The signature box takes focus but responds only to drawing, which 2.1.1 would excuse and this level does not. Clear and Confirm signature are plain text that Tab skips, so a keyboard user cannot sign at all.
Examples
Five 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
const pad = document.getElementById("signature");pad.addEventListener("pointerdown", startStroke);pad.addEventListener("pointermove", continueStroke);pad.addEventListener("pointerup", endStroke);// No keyboard way to signDrawing a signature depends on the path of the pointer, which 2.1.1 excuses. This criterion has no such exception, so keyboard users must have another way to sign.
Passes
Live preview
<fieldset> <legend>Sign the rental agreement</legend> <p>Draw your signature in the box, or type your full name below.</p> <canvas id="signature" width="400" height="120"></canvas> <label for="typed-signature">Type your full name to sign</label> <input id="typed-signature" name="typed-signature" type="text" autocomplete="name"> <button type="submit">Confirm signature</button></fieldset>Typing a name gives the same result as drawing, so the agreement can be signed with no pointer at all.
Passes
Live preview
// The pad has tabindex="0" and a label; Space lifts or lowers the penconst moves = { ArrowUp: [0, -5], ArrowDown: [0, 5], ArrowLeft: [-5, 0], ArrowRight: [5, 0] };pad.addEventListener("keydown", (event) => { if (event.key === " ") penDown = !penDown; else if (moves[event.key]) { pen.x += moves[event.key][0]; pen.y += moves[event.key][1]; if (penDown) drawTo(pen.x, pen.y); } else return; event.preventDefault();});The same freehand drawing can be made from the keyboard: arrow keys move the pen and Space lifts or lowers it.
Fails
Live preview
// "Press and hold Space for two seconds to send"let heldSince = 0;sendButton.addEventListener("keydown", (event) => { if (event.key === " " && !event.repeat) heldSince = Date.now();});sendButton.addEventListener("keyup", (event) => { if (event.key === " " && Date.now() - heldSince >= 2000) sendPayment();});Holding a key for a set time is specific timing for a keystroke, which the criterion rules out. People with tremor or slow movement may never manage it.
Passes
Live preview
<button type="button" id="send">Send $250</button><dialog id="confirm-send" aria-labelledby="confirm-title"> <h2 id="confirm-title">Send $250 to Priya Shah?</h2> <form method="dialog"> <button value="send">Send</button> <button value="cancel">Cancel</button> </form></dialog>Any single press of Enter or Space works, and a confirmation step guards against accidents instead of a timed hold.
Why it matters
It guarantees that keyboard-only and assistive technology users can use every feature, including path-dependent ones that 2.1.1 allows to rely on a pointer.
W3C: Understanding 2.1.3Level AAA
Level AAA is the highest level. It is not required for whole sites, but it is worth meeting where you can.
Where it is required
No law on this site requires Level AAA criteria for whole sites.
How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures