Operable · 2.1 Keyboard Accessible
All functionality must be operable with a keyboard interface, without requiring specific timing for individual keystrokes. The only exception is a function whose input depends on the path of the user's movement, not just its endpoints, such as freehand drawing.
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.
Use only Tab, Enter and Space to pick a size and add the shirt to your basket, then switch to Fails and try again. The Show tab order button numbers every control that Tab can reach.
The shirt costs $38. Choose a size, then add it to your basket.
The shirt costs $38. Choose a size, then add it to your basket.
The tools follow the version you last used.
What happened
Why it passes
Every size and the Add to basket button is a real button, so Tab reaches each one and Enter or Space works just as a click does.
Why it fails
The sizes are plain text that Tab skips, and Add to basket takes focus but ignores Enter and Space. Without a mouse you cannot buy the shirt.
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
<div class="button" onclick="addToBasket('linen-shirt')"> Add to basket</div>A div is not focusable and has no key handling, so Tab never reaches it and Enter or Space cannot trigger it. Only a mouse can add the shirt to the basket.
Passes
Live preview
<button type="button" class="button" onclick="addToBasket('linen-shirt')"> Add to basket</button>A button is in the tab order, and browsers fire its click event on Enter and Space, so one click handler serves mouse and keyboard users alike (technique SCR35).
Fails
Live preview
.order-row .row-actions { display: none;}.order-row:hover .row-actions { display: flex;}The Edit and Delete buttons exist only while the mouse is over the row. With display: none they are out of the tab order, so a keyboard user never reaches them.
Passes
Live preview
.order-row .row-actions { opacity: 0;}.order-row:hover .row-actions,.order-row:focus-within .row-actions { opacity: 1;}The buttons stay in the tab order and become visible as soon as keyboard focus moves into the row, as well as on hover.
Passes
Live preview
// <div id="max-price" role="slider" tabindex="0" aria-label="Maximum price"// aria-valuemin="0" aria-valuemax="500" aria-valuenow="200"></div>const slider = document.getElementById("max-price");const steps = { ArrowRight: 10, ArrowUp: 10, ArrowLeft: -10, ArrowDown: -10, PageUp: 50, PageDown: -50 };slider.addEventListener("keydown", (event) => { let value = Number(slider.getAttribute("aria-valuenow")); if (event.key in steps) value = Math.min(500, Math.max(0, value + steps[event.key])); else if (event.key === "Home") value = 0; else if (event.key === "End") value = 500; else return; event.preventDefault(); slider.setAttribute("aria-valuenow", value); slider.setAttribute("aria-valuetext", "$" + value);});Arrow keys, Page Up, Page Down, Home and End change the value, so the price filter works without dragging. Mouse users can still drag the thumb.
Why it matters
People who are blind, have limited dexterity or tremor, or use switch devices, speech input or on-screen keyboards rely on keyboard input. Anything that works only with a mouse locks them out.
W3C: Understanding 2.1.1Level 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.0 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, Japan, Australia, New Zealand and Israel.
How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures