Start scanning free

( Operable / WCAG 2.1.1 )

Interactive element is not reachable by keyboard

This check maps to Keyboard. Use the guidance below to confirm the issue, understand who it affects and ship a fix.

Critical Level A WCAG 2.1.1 — Keyboard

What’s wrong

A custom interactive element built with a non-interactive element like <div> or <span> is not reachable by keyboard — it has no tabindex and does not respond to keyboard events.

Why it matters

Keyboard-only users — including many people with motor disabilities — cannot interact with elements they cannot reach with Tab. If a clickable <div> has no keyboard support, those users simply cannot use it.

How to fix it

Use native HTML interactive elements wherever possible. For custom components, add tabindex="0" and keyboard event handlers.

Before 
<div class="card" onclick="openCard()">
  View details
</div>
After 
<!-- Best: use a native button -->
<button class="card" onclick="openCard()">
  View details
</button>

<!-- If div is necessary -->
<div
  class="card"
  role="button"
  tabindex="0"
  onclick="openCard()"
  onkeydown="if(event.key==='Enter'||event.key===' ')openCard()"
>
  View details
</div>

Learn more