2.1.1 Keyboard

Level A · added in WCAG 2.0

Everything a user can do with a mouse must also work with a keyboard alone, without needing exact timing between keystrokes. The only exception is a function that depends on the path of movement, such as freehand drawing.

Who it helps

Many blind people, people with tremors and others who cannot use a mouse rely on the keyboard. Switch devices and voice input also act like a keyboard.

How to meet it

Use native interactive elements: <button> for actions, <a href> for links, and real form controls; they are focusable and respond to Enter and Space by default.
For a custom control, add tabindex="0", the right ARIA role, and key handlers for Enter, Space or the arrow keys.
Make menus, tooltips and other content that opens on hover also open on keyboard focus or activation.
Make scrollable regions reachable by keyboard, for example with tabindex="0" on the container if it has no focusable children.
Give drag-and-drop, sliders and carousels a keyboard method, such as arrow keys or move buttons.
Test by unplugging the mouse: press Tab, Shift+Tab, Enter, Space, Escape and the arrow keys to reach and use every feature.

Examples

Fails:A clickable div cannot be reached with Tab or activated with Enter or Space

<div class="btn" onclick="addToCart()">Add to cart</div>

Fails:A submenu opens only on mouse hover

.nav .submenu { display: none; }
.nav li:hover .submenu { display: block; }

Passes:A native button is focusable and works with Enter and Space

<button type="button" class="btn" onclick="addToCart()">Add to cart</button>

Passes:The submenu also opens when focus moves inside its list item

.nav .submenu { display: none; }
.nav li:hover .submenu,
.nav li:focus-within .submenu { display: block; }

Can a scanner detect this?

Partly

Automated tools find a few specific problems: scrollable regions that cannot get focus, frames blocked with tabindex="-1", and server-side image maps. They cannot tell which elements have click handlers but no keyboard support. Test every task with the keyboard yourself.

axe-core rules that test it

scrollable-region-focusable
frame-focusable-content
server-side-image-map

Common mistakes

Using <a> without an href as a button, which takes it out of the Tab order.
Adding tabindex="0" to a custom control but handling only click events, so Enter and Space do nothing.
Listening for mousedown or mouseover only, with no matching keyboard or focus events.
Building a custom select or date picker that cannot be opened or closed from the keyboard.

Official W3C explanation of 2.1.1

Check your own page

See which automated WCAG checks your page fails, with the failing elements and how to fix them.

Reviewed November 2, 2026