• Success Criterion 3.2.1
  • Conformance level A

Focus-Triggered Tooltip That Traps or Reroutes Keyboard Focus

3.2.1 — On Focus

Scenario

Setting

A telehealth app's video-visit waiting room

What’s wrong

Tooltip-on-focus that traps or reroutes focus rather than just showing content.

Example 

<button id="mic-check" onfocus="showTooltip(); document.getElementById('tooltip-close').focus()">
  Test Microphone
</button>

Why it matters

Focusing the microphone test button immediately forces focus onto a tooltip's close button, so a patient waiting for their visit can't tab past it without an extra detour.

How to test

Tab to a control with a focus-triggered tooltip: if the tooltip traps or reroutes focus instead of just displaying content, it fails.

How to fix

A focus-triggered tooltip should only add descriptive text via aria-describedby, never move focus itself.

<button id="mic-check" aria-describedby="mic-tip">Test Microphone</button>
<span id="mic-tip" role="tooltip">Speak to check your mic level.</span>

Outcome

A patient tabs to the microphone test button and sees the tip without focus being pulled elsewhere.

Who is affected

Keyboard users preparing for a telehealth visit get rerouted away from the control they were trying to reach.

Learn more

Related scenarios