What level is WCAG 2.1.1?

WCAG 2.1.1 Keyboard is a Level A criterion under the Operable principle.

Level A Operable

WCAG 2.1.1: Keyboard

All functionality must be operable through a keyboard interface without requiring specific timing for individual keystrokes. This is essential for users who cannot use a mouse, including screen reader users, motor-impaired users, and power users.

What is WCAG 2.1.1 Keyboard?

WCAG 2.1.1 Keyboard is a Level A web accessibility success criterion under the Operable principle. All functionality must be operable through a keyboard interface without requiring specific timing for individual keystrokes. This is essential for users who cannot use a mouse, including screen reader users, motor-impaired users, and power users. Common failures include click handlers on div/span elements without keyboard event handlers and custom dropdown menus that only open on mouse hover. Meeting this criterion is essential for accessible, inclusive web design.

How to Test

✓ Tab through the entire page and verify all interactive elements are reachable
✓ Test that all buttons, links, and form controls can be activated with Enter or Space
✓ Verify custom widgets (dropdowns, modals, tabs) work with keyboard
✓ Check that drag-and-drop functionality has a keyboard alternative
✓ Test that keyboard shortcuts do not conflict with screen reader commands

Common Failures

✗ Click handlers on div/span elements without keyboard event handlers
✗ Custom dropdown menus that only open on mouse hover
✗ Drag-and-drop interfaces without keyboard alternatives
✗ Using onmousedown/onmouseup without keyboard equivalents
✗ Modal dialogs that cannot be closed with Escape key

✓ Good Example

<!-- Proper button element -->
<button onclick="handleSave()">Save</button>

<!-- Custom interactive element with keyboard support -->
<div role="button" tabindex="0"
  onclick="handleAction()"
  onkeydown="if(event.key==='Enter'||event.key===' ')handleAction()">
  Custom Action
</div>

The native button element is keyboard-accessible by default. The custom div uses role='button', tabindex='0', and keydown handler for Enter and Space keys.

✗ Bad Example

<!-- Div with only click handler -->
<div onclick="handleAction()" style="cursor: pointer;">
  Click me
</div>

<!-- Hover-only dropdown -->
<div class="dropdown" onmouseover="showMenu()">
  Menu
</div>

The clickable div cannot be focused or activated via keyboard. The dropdown only opens on mouse hover with no keyboard interaction.