• Success Criterion 1.3.1
  • Conformance level A

Tooltip Help Text Never Linked to Its Trigger Control

1.3.1 — Info and Relationships

Scenario

Setting

A hospital's patient portal appointment scheduler

What’s wrong

Tooltip or help text tied to a control (an info icon's explanation) is visible on screen but never announced — it isn't programmatically linked to the control, so screen reader users focus the control and get none of the guidance sighted users see.

Example 

<label for="visit-type">Visit type</label>
<select id="visit-type"><option>Telehealth</option></select>
<span class="info-icon" onmouseover="showTip()"></span>
<div class="tooltip" style="display:none">Video visits require a stable internet connection.</div>

Why it matters

A screen reader user focused on the visit type dropdown never hears the tooltip. It only appears on mouse hover and isn't linked to the field.

How to test

Focus the control that has an info-icon tooltip next to it: a screen reader should announce the tooltip text — if aria-describedby isn't linking them, it won't be read.

How to fix

Make a tooltip trigger focusable and link its text with aria-describedby so keyboard and screen reader users get it too.

<label for="visit-type">Visit type</label>
<select id="visit-type" aria-describedby="visit-tip"><option>Telehealth</option></select>
<span class="info-icon" tabindex="0" onmouseover="showTip()" onfocus="showTip()"></span>
<div id="visit-tip" class="tooltip" style="display:none">Video visits require a stable internet connection.</div>

Outcome

A patient hears the internet connection note while still focused on choosing a telehealth visit.

Who is affected

Screen reader and keyboard-only users scheduling a telehealth visit miss guidance that sighted mouse users see instantly.

Learn more

Related scenarios