Tooltips – Barrierefreie Kurzbeschreibungen richtig einsetzen

Was sind Tooltips?

Tooltips (auch Kurzinfos oder Hilfetexte) sind kleine Texthinweise, die erscheinen, wenn Nutzer:innen mit der Maus über ein Element fahren oder es mit der Tastatur fokussieren. Sie sollen ergänzende Informationen bereitstellen, z. B. zur Erklärung von Symbolen, Funktionen oder Formularfeldern.

Ein bekannter Anwendungsfall sind kleine Fragezeichen-Icons neben Formularfeldern, die z. B. Hinweise zur Passwortanforderung liefern.

Warum können Tooltips problematisch sein?

Tooltips sind häufig nicht barrierefrei, wenn sie:

• nur mit der Maus sichtbar sind

• nicht über die Tastatur erreichbar sind

• nicht mit dem Screenreader angesagt werden

• visuell zu schnell verschwinden oder schwer lesbar sind

• keine ausreichende Kontrast- oder Schriftgröße haben

In solchen Fällen sind die Zusatzinformationen für viele Menschen nicht nutzbar – obwohl sie funktional oft entscheidend sind.

Anforderungen an barrierefreie Tooltips

Damit Tooltips zugänglich sind, sollten sie:

• auch per Tastatur fokussierbar und auslösbar sein

• per Screenreader erkennbar sein (z. B. durch aria-describedby)

• lange genug sichtbar bleiben, auch wenn die Maus bewegt wird

• nicht nur durch Farbe oder Form erkennbar sein

• mobil freundlich gestaltet sein (z. B. bei Touch-Bedienung)

Barrierefreie Alternativen und sinnvolle Ergänzungen

Je nach Kontext kann es sinnvoll sein, Tooltips nicht als eigenständiges UI-Element, sondern als beschreibenden Text direkt im Fluss zu integrieren. Alternativen sind:

• sichtbarer Hilfetext unter dem Eingabefeld

• zusätzliche Erläuterungen über aria-describedby

• Erklärung im Kontext statt ausgelagertem Hinweis

Beispiel:
Statt ein Passwort-Feld nur mit einem Tooltip „Mind. 8 Zeichen“ zu versehen, sollte die Information dauerhaft lesbar unter dem Feld stehen – und für Screenreader eingebunden sein.

Technische Hinweise zur Umsetzung

• Verwende kein reines title-Attribut – es ist nicht zuverlässig zugänglich.

• Nutze stattdessen ARIA-Attribute wie aria-describedby, um Tooltips programmatisch zu verbinden.

• Achte auf kontraststarke Darstellung, gut lesbare Schrift und ausreichende Größe.

• Berücksichtige Touch-Interaktion, z. B. durch antippbare Info-Symbole.

Relevante WCAG-Kriterien

• 1.4.13 Inhalt bei Hover oder Fokus – Inhalte wie Tooltips müssen sichtbar bleiben und nutzbar sein.

• 1.3.1 Info and Relationships – zusätzliche Informationen müssen maschinenlesbar verfügbar sein.

• 2.1.1 Tastaturbedienung – auch Tooltips müssen ohne Maus erreichbar sein.