• Success Criterion 2.1.1
  • Conformance level A

Clickable Div With No Keyboard Focus or Key Handling at All

2.1.1 — Keyboard

Scenario

Setting

A telehealth app's video-visit waiting room

What’s wrong

Clickable div/span/icon with click handler, no tabindex="0" (code making it keyboard-focusable), no key handling.

Example 

<span class="join-call-icon" onclick="joinVisit()">
  <svg>...</svg>
</span>

Why it matters

A patient tabbing through the waiting room never lands on the join button, so they miss their appointment despite waiting on time.

How to test

Tab to a clickable div/span: if it has no tabindex="0" and no keydown handler, keyboard focus skips over it entirely.

How to fix

Swap the span for a real button; it gets focusability and Enter/Space activation automatically, no extra code needed.

<button class="join-call-icon" onclick="joinVisit()">
  <svg aria-hidden="true">...</svg>
</button>

Outcome

A patient tabs to the join icon, presses Enter, and gets into their video visit on time.

Who is affected

Keyboard-only users and switch-access users have no way to reach or trigger the join control at all.

Learn more

Related scenarios