WCAG 2.1.1 Keyboard: what it means and how to fix it

Level A · Operable · Updated

Short answer: Everything you can do with a mouse (menus, buttons, carousels, filters, checkout) must also work with a keyboard alone.

What it requires

All functionality must be operable through a keyboard interface, without requiring specific timings for individual keystrokes. Visitors should be able to reach every interactive element with Tab, operate it with Enter or Space, and never get trapped.

Who it affects

Blind visitors using screen readers (which are driven by the keyboard), people with motor disabilities who use keyboards, switches or voice control, and power users.

How it shows up in ADA website claims

Complaints often describe drop-down menus that open only on hover, add-to-cart or size selectors built from clickable divs, pop-ups that trap focus, and checkout steps that cannot be completed without a mouse.

How to check your site

Put the mouse away and use only Tab, Shift+Tab, Enter, Space and the arrow keys:

  1. Can you open the main menu and reach every link?
  2. Can you choose a product option, add it to the cart and check out?
  3. Can you close pop-ups (newsletter, cookie banner) with Escape or a reachable button?
  4. Do you ever get stuck?

Automated tools catch only a small part of this. A five-minute manual pass finds most problems.

How to fix it

Use real interactive elements; they are keyboard-accessible by default.

<!-- Fails: not focusable, not operable by keyboard -->
<div class="add-to-cart" onclick="add()">Add to cart</div>

<!-- Passes -->
<button type="button" class="add-to-cart" onclick="add()">Add to cart</button>

Make hover menus open on focus and on Enter as well, and return focus to the trigger when a dialog closes.

Frequently asked questions

Is adding tabindex="0" to a div enough?

It makes the div focusable, but you also have to handle Enter and Space and expose the role. A native button or a element does all of that for free.

Do sliders and carousels need keyboard support?

Yes. Their controls must be reachable and operable by keyboard, and auto-rotating carousels need a pause button.

What is a keyboard trap?

A component that you can Tab into but not out of, such as an embedded widget or a modal. It fails 2.1.2 No Keyboard Trap, which is also Level A.

Automated rules that test this (axe-core): scrollable-region-focusable, frame-focusable-content, nested-interactive. Our scanner runs these checks.

Other commonly cited criteria

Read the official WCAG 2.1 specification at W3C.

Proof of Access provides technical accessibility assessments. We are not a law firm and nothing on this page is legal advice. If you have received a demand letter or a lawsuit, talk to an attorney.