Goal
Ensure all functionality of a website or application can be operated entirely through a keyboard, without requiring any specific timing for keystrokes — no exceptions for any content.
Key Points
- Users who cannot use a mouse (e.g., due to motor disabilities or blindness) must be able to fully operate every control using only the keyboard.
- Unlike 2.1.1 (Keyboard), no exceptions are allowed — even complex or time-based interactions must have keyboard support.
- Includes advanced widgets (e.g., drag-and-drop, sliders, interactive maps).
- Focus indicators must be visible and logical.
- Tab order must follow a meaningful sequence.
Short Summary
Every function — even complex interactive elements — must be fully accessible using a keyboard alone. Mouse-only operations should always have a keyboard alternative.
Example Issue and Fix
Drag-and-drop slider without keyboard support
Fail
<div class="flex w-full flex-col items-center justify-center gap-8 p-8 text-center">
<div class="flex flex-col items-center space-y-2">
<label for="volume" class="text-gray-700 font-medium">Volume</label>
<div id="slider" class="w-64 h-2 bg-gray-300 rounded relative cursor-pointer">
<div class="absolute top-0 left-0 bg-blue-500 h-2 w-1/3 rounded"></div>
</div>
</div>
</div>
Pass
<div x-data="passVolumeControl" class="flex w-full flex-col items-center justify-center gap-8 p-8 text-center">
<div class="flex flex-col items-center space-y-2">
<label for="volume" class="text-gray-700 font-medium">Volume: <span x-text="value"></span>%</label>
<div
x-ref="slider"
role="slider"
tabindex="0"
aria-valuemin="0"
aria-valuemax="100"
:aria-valuenow="value"
@scroll.window="handleScroll"
@keydown.arrow-left.prevent="decrease"
@keydown.arrow-right.prevent="increase"
class="relative w-64 h-2 bg-gray-200 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<div class="absolute top-0 left-0 h-2 bg-blue-500 rounded-full" :style="progressStyle"></div>
</div>
</div>
</div>
Quick Checklist
- Every interactive element (buttons, sliders, menus, maps) is operable via keyboard
- No mouse-only or pointer-specific actions
- Tab order is logical and consistent
- Focus indicator is visible at all times
- All controls respond to Enter, Space, or Arrow keys as appropriate
- No part of the interface traps the keyboard focus