← All WCAG 2.1 criteria
2.1.1Level A2.1 Keyboard Accessible

Keyboard

All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement.

What it means

The intent of this success criterion is to ensure that, wherever possible, content can be operated through a keyboard or keyboard interface (so an alternate keyboard can be used). When content can be operated through a keyboard or alternate keyboard, it is operable by people with no vision (who cannot use devices such as mice that require eye-hand coordination) as well as by people who must use alternate keyboards or input devices that act as keyboard emulators. Keyboard emulators include speech input software, sip-and-puff software, on-screen keyboards, scanning software and a variety of assistive technologies and alternate keyboards. Individuals with low vision also may have trouble tracking a pointer and find the use of software much easier (or only possible) if they can control it from the keyboard. Examples of "specific timings for individual keystrokes" include situations where a user would be required to repeat or execute multiple keystrokes within a short period of time or where a key must be held down for an extended period before the keystroke is registered. The phrase "except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints" is included to separate those things that cannot reasonably be controlled from a keyboard. Most actions carried out by a pointing device can also be done from the keyboard (for example, clicking, selecting, moving, sizing). However, there is a small class of input that is done with a pointing device that cannot be done from the keyboard in any known fashion without requiring an inordinate number of keystrokes. Free hand drawing, or watercolor painting require path dependent input. Drawing straight lines, regular geometric shapes, re-sizing windows and dragging objects to a location (when the path to that location is not relevant) do not require path dependent input.

Failing example

<!-- Fails: click handler only, no keyboard equivalent -->
<div onclick="openModal()">Open settings</div>

How to fix it

<!-- Pass: use a button element (keyboard-accessible by default) -->
<button type="button" onclick="openModal()">Open settings</button>

<!-- Or: add keyboard support to the div (not recommended) -->
<div role="button" tabindex="0"
     onclick="openModal()"
     onkeydown="if(event.key==='Enter'||event.key===' ')openModal()">
  Open settings
</div>

How A11yRisk detects this

A11yRisk detects this criterion automatically.

Scan your site for this violation