Why this matters
Users who cannot use a mouse — due to motor disabilities, blindness, or preference — rely on keyboard navigation. If interactive elements aren't keyboard accessible, these users are locked out of core functionality.
Common failures
These are the most frequent ways this criterion is violated in real-world websites:
- Click handlers on <div> or <span> without keyboard support
- Custom dropdowns that can't be navigated with arrow keys
- Modal dialogs that don't trap focus
- Drag-and-drop without keyboard alternatives
- Hover-only tooltips with no keyboard trigger
- Carousel controls that are mouse-only
How to fix
- Use native interactive elements: <button>, <a>, <input>, <select>
- If custom elements are necessary, add tabindex='0', role, and keyboard event handlers
- Ensure all onClick handlers also work with Enter and Space keys
- Implement keyboard support for custom widgets following WAI-ARIA patterns
- Provide keyboard alternatives for drag-and-drop operations
Related axe-core rules
xsbl uses axe-core to automatically detect violations of this criterion. The following rules are checked:
Check your site for 2.1.1 violations
xsbl scans your rendered pages in a real browser and finds violations of this criterion automatically.
Scan your site freeOfficial reference: Understanding WCAG 2.1.1: Keyboard (W3C)