This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Accessibility
How must tooltips and popovers on websites be operable?
Popovers that appear on mouse contact or keyboard focus — tooltips, submenus, info bubbles — must meet three conditions: the visitor can close them again without moving the mouse, usually with the Escape key. They can move the mouse onto the popover without it disappearing. And it stays open until they close it themselves or navigate away.
Three rules for every popover
Anyone working with heavy screen magnification only ever sees a portion of the page. If a tooltip opens on mouse contact, it can quickly cover, in the zoomed-in view, exactly the text the visitor is currently reading — and with no way to close it, they're stuck. Hence the first rule: dismissible, typically via the Escape key. The second rule concerns the same group: to read a popover while zoomed in, you have to be able to move the mouse onto it — if it disappears the moment you leave the trigger, its content stays out of reach. The third rule requires persistence: a popover that disappears on its own after a few seconds is worthless for slow readers. Classic trouble spots are custom-built submenus and info icons in forms.
How our audit handles popovers
Popovers only reveal themselves through interaction: you have to move the mouse over the trigger, press Escape, watch how long it stays open. Our measurement engine performs targeted, passive interactions on your page — it moves through the page with keyboard focus, for instance, and observes the behaviour. But that doesn't deliver a complete judgment on all three conditions for every single popover; following our principle, nothing counts as passed here without genuine evidence. The report therefore marks the criterion as a human check point. At the Gold Standard level, an auditor operates the popovers on your page with mouse and keyboard and documents every one that can't be closed, disappears fleetingly, or can't be reached.
Examples
Tooltip only when running over
<span class="hilfe" title="Die Kundennummer steht auf der Rechnung oben rechts.">?</span><button type="button" aria-describedby="hilfe-knr" aria-expanded="false">Wo finde ich das?</button>
<p id="hilfe-knr" hidden>Die Kundennummer steht auf der Rechnung oben rechts.</p>An overlay must be accessible by keyboard, close with Escape and stop as long as the pointer rests on it.
- Hover over the info icons and menus on your page with the mouse and press Escape — the popover should close.
- Move the mouse from the trigger onto the popover itself — it must stay open while you do.
- Remove timers that automatically close popovers after a few seconds.
- Prefer click over mouse contact as the trigger — whatever opens and closes on click meets the rules almost automatically.
- Ask your agency to use proven, accessible off-the-shelf components for submenus and tooltips instead of custom builds.
