This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Accessibility
When is a website fully operable with the keyboard?
Level A (2.1.1) requires keyboard operation for all functions, but leaves an exception: if the input depends on the path of the movement, such as when drawing freely, it may be reserved for the mouse. Level AAA criterion 2.1.3 deletes this exemption. Each function is accessible with the keyboard, including drawing, moving on a map and playing the game.
What the Criterion Requires
All functions of the page can be executed via the keyboard without a certain time sequence of keystrokes being necessary. For tasks that work naturally with movement, this means: build an equivalent keyboard frame. A drawing tool receives input fields for coordinates or arrow keys for setting points; a map can be moved with arrow keys and zoomed in with plus and minus; A sorting game gets keyboard shortcuts to record and drop.
For whom this counts
People who can’t guide a mouse because hands are shaking, power is missing, or vision isn’t finding the pointer work exclusively with keyboards, switches, or voice controls that replicate keyboard input. For them, a function without a keyboard path simply does not exist. The Level A exception affects few elements, but these are often the most valuable: the interactive card, the signature block, the editor.
This is how we deal with it
The measuring core checks the keyboard operation of level A: focus order, reachable elements, focus traps. Whether a motion function has an equivalent keyboard path, decides a tester on the screen. The criterion belongs to the category AAA in knowledge; in the report, movement areas appear as an indication for verification.
Examples
Card moveable only with the mouse
<div id="karte" class="ziehbar"></div><div id="karte" tabindex="0" role="application" aria-label="Karte, Pfeiltasten verschieben, Plus und Minus zoomen"></div>
<script>
karte.addEventListener("keydown", (e) => {
if (e.key === "ArrowLeft") verschiebe(-50, 0);
if (e.key === "+") zoom(1);
});
</script>Without the exception of level A, a motion function also needs an equivalent keyboard path.
- List all the functions that only go with the mouse today: draw, drag, cards, slider, signature.
- Build a keyboard path for each function: arrow keys for movement, input fields for values, key shortcuts for recording and dropping.
- Explain the key assignment visibly next to the item, not just in the help text.
- Put the mouse away and work for an hour just with the keyboard through the page.
