Accessible Tooltip
Der Hinweis, den nur die Maus findet
Tooltip ohne Namen, Auslöser ohne Namen: zwei Befunde an einem Hinweis.
Entscheidungshilfe
Nicht jeder Hinweis gehört in einen Tooltip
Entscheidend ist nicht die Form der Sprechblase, sondern wer sie öffnet, was darin steht und wohin der Fokus darf.
Hinweis: immer sichtbar
Für Pflichtformat, Eingabehilfe und Fehlerkorrektur. Der Text braucht keinen Öffnungszustand und bleibt bei Touch, Zoom und Tastatur erhalten.
Erste Wahl für wichtige Information
Tooltip: automatisch
Für eine kurze, ergänzende Beschreibung eines vorhandenen Steuerelements. Er erscheint bei Fokus oder Hover und enthält keine Bedienung.
Sparsam für Zusatzwissen
Popover oder Dialog: auf Anforderung
Für Links, Auswahlfelder oder längere Hilfe. Die Person öffnet den Bereich bewusst; die enthaltenen Elemente dürfen Fokus erhalten.
Für Inhalt mit eigener Aktion
Die schnelle Wahl: Muss die Information für die Aufgabe bekannt sein, zeigen Sie sie dauerhaft. Ist sie kurz und nur ergänzend, kann ein Tooltip passen. Muss jemand im Zusatzinhalt handeln, verwenden Sie ein bewusst geöffnetes Popover oder einen Dialog.
Fokus · Hover · Escape
Der Zustandsvertrag eines echten Tooltips
Vier Beziehungen müssen zusammenpassen. Die Grafik zeigt den Weg, ohne ein bedienbares Muster vorzutäuschen.
- Fokus oder Hover
- Der Tooltip erscheint. Der Tastaturfokus bleibt am Auslöser.
- Zeiger auf dem Tooltip
- Der Tooltip bleibt offen, damit sein Text erreichbar bleibt.
- Escape
- Der Tooltip schließt. Der Fokus bleibt unverändert.
- Fokus und Zeiger verlassen den Bereich
- Der Tooltip schließt und erzeugt keinen eigenen Tabstopp.
Was im Markup verbunden sein muss
Die Beziehung läuft vom Auslöser zum Hinweis, nicht umgekehrt.
aria-describedby="export-hinweis"id="export-hinweis" role="tooltip"- Text statt Bedienelemente. Ein Tooltip nimmt keinen Fokus an und enthält weder Links noch Felder oder Schaltflächen.
- Beschreibung statt Ersatzname. Der Auslöser braucht bereits einen verständlichen Namen.
aria-describedbyergänzt die Beschreibung. - Kein Popup-Zustand. Ein automatisch erscheinender Tooltip braucht weder
aria-expandednocharia-haspopup. - Lesbarer Inhalt. Der Text im Tooltip liefert seinen zugänglichen Namen. Ein zusätzliches
aria-labelkann diesen Text verdecken.
Direkt in den Standards nachlesen
- W3C: WCAG 1.4.13 – Content on Hover or Focus
- WAI-ARIA APG: Tooltip Pattern – als noch nicht konsentiertes Arbeitsmuster gekennzeichnet
- WAI-ARIA 1.2: Rolle tooltip
So prüfen Sie es
- Setzen Sie den Fokus mit Tab auf den Auslöser. Der Tooltip muss sichtbar werden.
- Drücken Sie Escape. Der Tooltip muss verschwinden, der Fokus am Auslöser bleiben.
- Öffnen Sie ihn per Hover und fahren Sie auf den Hinweis. Er muss sichtbar bleiben.
- Prüfen Sie den Auslöser mit einem Vorleseprogramm: Name, Rolle und Beschreibung müssen hörbar und unterscheidbar sein.
- Suchen Sie im Tooltip nach Links, Feldern oder Schaltflächen. Finden Sie welche, braucht der Inhalt ein Popover- oder Dialogmuster.
Aus dem Prüfbericht
Zwei Stellen, zwei Befunde
Kritisch Der Tooltip hat keinen Text Regel aria-tooltip-name
Ein role="tooltip" ohne Inhalt ist stumm. Der Hinweistext gehört in das Element, aria-describedby zeigt darauf.
Kritisch Das i hat keinen Namen Regel button-name
Ein Buchstabe im Kreis sagt „Schaltfläche“. aria-label="Hinweis zum Pegelstand" gibt ihm den Namen.
Zum Mitnehmen
Der Tooltip, korrigiert
Ein Name am Auslöser, ein Verweis auf den Hinweis, Escape schließt.
Korrektur in 2 Schritten ansehen
Auslöser und Hinweis verbinden
aria-describedby macht den Hinweis zur Beschreibung des Auslösers. Fokus und Maus öffnen ihn.
KorrekturvergleichSchritt 1 · HTML Vorher
<button type="button" class="info">i</button> <div role="tooltip" class="tip"></div>Nachher
<button type="button" class="info" aria-label="Hinweis zum Pegelstand" aria-describedby="pegel-tip"> <span aria-hidden="true">i</span> </button> <div id="pegel-tip" role="tooltip" class="tip" hidden> Pegel bezeichnet den Wasserstand. </div>Markierte Zeilen wurden geändert
So prüfen Sie es Tab auf das i. Ein Vorleseprogramm sagt „Hinweis zum Pegelstand, Schaltfläche. Pegel bezeichnet den Wasserstand.“
Fokus, Maus und Escape steuern den Hinweis
Der Hinweis öffnet bei Fokus und Hover, bleibt bei Maus darauf und schließt mit Escape.
KorrekturvergleichSchritt 2 · JavaScript Vorher
info.addEventListener('mouseenter', () => tip.hidden = false); info.addEventListener('mouseleave', () => tip.hidden = true);Nachher
const show = () => (tip.hidden = false); const hide = () => (tip.hidden = true); for (const type of ['mouseenter', 'focus']) info.addEventListener(type, show); for (const type of ['mouseleave', 'blur']) info.addEventListener(type, hide); tip.addEventListener('mouseenter', show); tip.addEventListener('mouseleave', hide); document.addEventListener('keydown', (event) => { if (event.key === 'Escape') hide(); });Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie den Hinweis per Tab, drücken Sie Escape. Der Hinweis verschwindet, der Fokus bleibt.