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-describedbyErklä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.
