Skip to lesson content
WCAG 2.1.1 · Level AMedium10 min readKeyboard

Elements Not Keyboard-Accessible

Overview

All interactive functionality must be operable with a keyboard alone. Users who can't use a mouse depend entirely on keyboard navigation.

WCAG Criterion:2.1.1
Conformance Level:Level A
Difficulty:Medium
Time to fix:~10 min
Category:Keyboard

The Problem

This pattern is inaccessible — avoid it.

[ AVOID ]
<!-- Click handler on a div — not keyboard-accessible -->
<div onclick="openMenu()">Menu</div>

<!-- Custom slider with no keyboard support -->
<div class="slider" onmousedown="startDrag()"></div>

The Fix

Use this accessible pattern instead.

[ CORRECT ]
<!-- Use native interactive elements -->
<button onclick="openMenu()">Menu</button>

<!-- Or add keyboard support explicitly -->
<div class="slider" role="slider"
     tabindex="0"
     aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"
     onkeydown="handleKey(event)">
</div>

Step-by-step

  1. Test your page by unplugging your mouse and using Tab, Shift+Tab, Enter, Space, and arrow keys.

  2. Replace div/span click handlers with <button> or <a> elements.

  3. If you must use a custom widget, add role, tabindex="0", and keydown handlers.

  4. Ensure every interactive element can be reached and activated by keyboard.

  5. Don't use tabindex values > 0 — they create confusing tab order.

Framework Notes

How to apply this fix in your stack.

// Prefer native elements
<button onClick={openMenu}>Menu</button>

// If you must use a div:
<div role="button" tabIndex={0}
     onClick={handleClick}
     onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && handleClick()}>

FAQ