• Success Criterion 2.1.1
  • Conformance level A

Tooltip Trigger That Can’t Be Reached by Keyboard Focus

2.1.1 — Keyboard

Scenario

Setting

A video-conferencing app's meeting controls

What’s wrong

Information available only via mouse-hover tooltip whose trigger is not focusable — no keyboard path to the content at all.

Example 

<span class="net-quality-icon" title="Connection: Poor (packet loss 12%)">
  <svg>...</svg>
</span>
<!-- the tooltip only appears on mouse hover of the span, which is never focusable -->

Why it matters

A participant using only a keyboard never learns their connection is poor, since the only clue is a hover tooltip they cannot trigger.

How to test

Tab to a tooltip's trigger element: if it's not focusable (only mouse-hoverable), keyboard users never see the tooltip content.

How to fix

Make the trigger a focusable element and expose the same text as an accessible name, not just a title attribute tied to hover.

<button class="net-quality-icon" aria-label="Connection: Poor, 12 percent packet loss">
  <svg aria-hidden="true">...</svg>
</button>

Outcome

A participant tabs to the connection icon and hears the poor-connection status called out at once.

Who is affected

Keyboard-only users and screen reader users get no path at all to information shown only on mouse hover.

Learn more

Related scenarios