WCAG 2.1.1 Keyboard — Testing Guide

WCAG 2.1.1 Keyboard (Level A) requires that all functionality of the content is operable through a keyboard interface. For users with motor impairments who cannot use a mouse or touchscreen, keyboard

February 21, 2026 · 3 min read · WCAG Guides

WCAG 2.1.1 Keyboard (Level A) requires that all functionality of the content is operable through a keyboard interface. For users with motor impairments who cannot use a mouse or touchscreen, keyboard is the primary interaction method. Mobile screen-reader users also navigate with keyboard-like gestures.

What it requires

Every interactive element — buttons, links, form controls, custom components — must be:

  1. Reachable via Tab / Shift+Tab
  2. Activatable via Enter or Space
  3. Usable without requiring specific timing (except where essential)

No mouse-only operation. No touch-only operation. Every feature needs a keyboard path.

Common violations

1. Div with onClick


<div onclick="doSomething()">Click me</div>

Not focusable, not keyboard-activatable.

Fix:


<button onclick="doSomething()">Click me</button>
<!-- or -->
<div role="button" tabindex="0" onclick="doSomething()"
     onkeydown="if(event.key==='Enter') doSomething()">Click me</div>

2. Custom dropdowns

Custom select / menu without keyboard support. User can open but not navigate options.

Fix: Implement WAI-ARIA combobox / menu pattern. Arrow keys navigate, Enter selects, Escape closes.

3. Modal dialogs without focus trap

Modal opens; Tab goes past its content into the background page. User loses track.

Fix: Focus trap — cycle Tab within modal. Return focus to trigger on close.

4. Drag-and-drop without keyboard alternative

Reorder-list with drag. Keyboard users cannot reorder.

Fix: Alternative: buttons to move up / down. Or keyboard shortcuts (Space to pick up, Arrow to move).

5. Hover-only menus

Menu appears on hover. Keyboard users cannot trigger.

Fix: Also appears on focus. Open with Enter / Space.

6. Canvas / WebGL content

Game or interactive visualization with mouse-only input.

Fix: Keyboard equivalents. Arrow keys for movement, Space for action. Or ALT text + alternative interface.

Testing

Manual

  1. Unplug your mouse
  2. Use only Tab, Shift+Tab, Enter, Space, Arrow keys, Escape
  3. Try to complete every flow in the app
  4. Note any element you cannot reach or activate

This is the gold-standard test. Nothing replaces it.

Automated


cy.get('body').tab();  // cypress-plugin-tab
cy.focused().should('have.attr', 'data-test', 'next-element');

iOS

External Bluetooth keyboard. Full Access enabled in iOS Settings. Navigate entire app with keyboard.

Android

External Bluetooth keyboard. Test with TalkBack + keyboard for double-coverage.

Fix patterns

Native HTML / UI controls first