Ein Tooltip ist ein kurzer Hinweistext, der neben einem Bedienelement erscheint, sobald der Zeiger darauf ruht oder es den Tastaturfokus bekommt. Er erklärt ein Symbol oder gibt einen Hinweis zu einem Formularfeld. Weil er von einem Ereignis abhängt, das es nicht überall gibt, gehört er zu den Bedienhilfen mit den meisten Fallstricken in der Barrierefreiheit.
- Tooltip
Kurzer Hinweistext, der neben einem Bedienelement erscheint, sobald der Zeiger darauf ruht oder es den Tastaturfokus bekommt.
Beispiel: „Der Tooltip am Fragezeichen erklärt, wofür die Kundennummer gebraucht wird.“Auch: Kurzhinweis oder Hilfetext. Vom Popover unterscheidet er sich durch Umfang und Bedienung: Ein Tooltip trägt reinen Text und wird nicht angeklickt, ein Popover kann Links und Buttons enthalten.
Abgrenzung zum Hover-Zustand: Der Hover-Zustand ändert die Darstellung des Elements selbst. Der Tooltip bringt zusätzlichen Inhalt ins Bild, und genau deshalb greifen bei ihm eigene Anforderungen.
Warum reines Hovern nicht ausreicht
Ein Hinweis, der nur bei Mauszeigerkontakt erscheint, existiert auf dem Touchscreen nicht. Ein Finger hat keinen Zustand zwischen „daneben“ und „gedrückt“, weshalb der Tooltip dort entweder ausbleibt oder gemeinsam mit dem Klick ausgelöst wird. Gleiches gilt für die Tastatur: Ohne Reaktion auf den Fokus bleibt der Hinweis für jeden unerreichbar, der sich mit der Tabulatortaste durch die Seite bewegt.
Technisch heißt das: Ein Tooltip wird immer an :hover und an :focus-visible gebunden. Auf Touchgeräten braucht er einen eigenen Auslöser, meist ein antippbares Fragezeichen neben dem Feld.
Was das Erfolgskriterium 1.4.13 verlangt
Die WCAG 2.2 regeln zusätzlich eingeblendete Inhalte im Erfolgskriterium 1.4.13 Content on Hover or Focus auf Stufe AA. Es nennt drei Bedingungen. Der Hinweis muss ausblendbar sein, ohne dass Zeiger oder Fokus wegbewegt werden, üblicherweise über die Escape-Taste. Er muss mit dem Zeiger erreichbar bleiben, damit ein abgeschnittener Text lesbar ist. Und er muss stehen bleiben, bis der Auslöser wegfällt oder der Nutzer ihn schließt.
Ausgenommen ist der Hinweis, den der Browser selbst aus dem Attribut title erzeugt, weil dort die Darstellung nicht vom Autor kommt. Praktisch hilft das wenig: Dieser Hinweis erscheint auf Touchgeräten nicht, lässt sich nicht gestalten und wird von Screenreadern unterschiedlich behandelt. Für eigene Tooltips beschreibt das ARIA Authoring Practices Guide das Muster mit role="tooltip" und einer Verknüpfung über aria-describedby.
<button aria-describedby="tip-kdnr">Kundennummer</button>
<span role="tooltip" id="tip-kdnr">Sechsstellig, steht oben rechts auf der Rechnung.</span>Wann ein Tooltip die falsche Lösung ist
Alles, was zum Ausfüllen gebraucht wird, gehört sichtbar unter das Feld. Ein Formathinweis im Tooltip erscheint erst, wenn jemand danach sucht, und wer ihn nicht findet, macht den Fehler trotzdem. Wir empfehlen, Formathinweise dauerhaft anzuzeigen und den Tooltip für seltene Erklärungen zu behalten.
Ebenso gilt: Ein Symbol, das ohne Tooltip unverständlich bleibt, braucht eine Beschriftung. Der Tooltip repariert dann ein Symbol, das seine Aufgabe nicht erfüllt.