Definition

Tooltips sind Informationen, die üblicherweise angezeigt werden, wenn Nutzende zu einem bestimmten Bereich navigieren oder im Produkt eine bestimmte Aktion ausführen.

Die geläufigste Art von Tooltips ist die Realisierung über das „Title-Attribut“. Das sind so genannte „Hover“-Nachrichten, die angezeigt werden, wenn Nutzende ihren Cursor über ein Navigationsmenü, ein interaktives Element oder einen vordefinierten „Hotspot“ bewegen.

nach oben

Anwendungsbereiche

Generell gilt: Vermeiden Sie Tooltips weitgehend.

Tooltips werden für unterschiedliche Zwecke verwendet. Diese sind aus barrierefreier Sicht unterschiedlich zu behandeln.

• Tooltips zum Onboarding von Nutzenden
• Kurzinfo zur Ankündigung neuer Funktionen
• Detaillierte und interaktive Quick-Through-Tooltips
• Kontextbezogene Quickinfos
• Link: Der Titel oder die Beschreibung des verlinkten Dokuments
• Media Elemente, (z. B.: ein Bild): eine Beschreibung oder Quellenangabe
• Paragraf: eine Fußzeile oder ein Kommentar über den Paragrafen
• Zitate: Informationen über den Autor, usw.

Nützliche Informationen sollten direkt auf dem Bildschirm erscheinen. Ist die Information nicht wichtig genug, um direkt angezeigt zu werden, kann sie in den häufigsten Fällen gleich ganz weggelassen werden.

nach oben

Typische Probleme von Nutzenden

Inhalte, die beim Bewegen des Mauszeigers über einen Auslöser oder bei dessen Fokussierung auftauchen, sind oft problematisch für sehbehinderte Menschen, die eine starke Zoomvergrößerung verwenden (Browser-Zoom, Zoom über die Eingabehilfen des Betriebssystems, oder Zoom mit einer speziellen Vergrößerungssoftware wie ZoomText oder SuperNova). Auch eine schlechte Möglichkeit der Tastaturbedienung stellen für viele Betroffene Barrieren dar. Um diesen Problemen zu begegnen, sollten gemäß Prüfschritt „9.1.4.13 Eingeblendete Inhalte“ der EN 301 549 drei Anforderungen erfüllt werden:

1. Wenn zusätzliche Inhalte durch Darüberfahren mit dem Zeiger erscheinen, können Nutzende den Zeiger über diesen Inhalt bewegen, ohne dass er verschwindet.
2. Es gibt die Möglichkeit, einen eingeblendeten Inhalt zu schließen, ohne den Fokus zu verschieben (z. B. durch Drücken der Escape-Taste oder durch Aktivieren des Elements, dessen Fokussierung den Inhalt einblendet).
3. Der Inhalt schließt nicht selbsttätig nach einer gewissen Zeitspanne.

nach oben

Kritische Auseinandersetzung mit dem Title-Attribut

Die oben genannten Anforderungen (Prüfschritt 9.1.4.13) der BITV gelten nicht für automatische Tooltips, welche beispielsweise über ein „Title-Attribut“ erzeugt wurden und deren Verhalten durch den Nutzer-Agenten bestimmt wird. Die Nutzung des „Title-Attributs“ ist trotzdem kritisch zu betrachten. So wird auch in den WCAG-Techniken explizit von der Nutzung abgeraten. 

Die Nutzung des „Title-Attributs“ ist problematisch für:

• Menschen, die Touchscreens (Tablets und Smartphones) benutzen
• Menschen, die mit Hilfe der Tastatur navigieren
• Menschen, die mit unterstützenden Technologien wie z. B. einem Bildschirmleser auf das Internet zugreifen
• Menschen, die mit starker Vergrößerung oder Bildschirmlupen arbeiten
• Menschen mit Beeinträchtigungen in der Feinmotorik
• Menschen mit kognitiven Einschränkungen

nach oben

Wann sollte das „Title-Attribut“ verwendet werden?

• Zur Kennzeichnung von frame und iframe Elementen
• Zum Bereitstellen einer programmgesteuerten zugeordneten Bezeichnung für Steuerelemente in Situationen, in denen eine sichtbare Bezeichnung überflüssig wäre

nach oben

Wann sollte das „Title-Attribut“ nicht verwendet werden?

• Um zusätzliche Informationen bereitzustellen, die nicht als Text in einem Link oder im umgebenen Inhalt vorhanden sind
• Bereitstellen der gleichen Informationen wie im Linktext
• Als Bildunterschrift
• Als alleinige Beschriftung für Steuerelemente
• Als Erweiterung einer Abkürzung

nach oben

Empfehlung

• Vermeiden Sie Tooltips weitgehend.
• Achten Sie auf Redundanz. Wenn eine Funktion bereits auf der Seite erklärt wird, kann ein Tooltip unnötig sein und Nutzende frustrieren.

Wenn sie dennoch Tooltips implementieren:

• Stellen Sie sicher, dass der Tooltip auch tastaturbedienbar ist.
• Integrieren Sie den Tooltip bei Formularen in das Label des Eingabefelds oder verwenden Sie aria-Attribute, um diese zu verknüpfen.
• Verwenden Sie satte Farben, um Ihren Tooltip hervorzuheben und sich von hellen Hintergründen abzuheben.
• Achten Sie darauf, wo Sie Ihre Tooltips platzieren. Wichtige Teile der Webseite sollten wenn möglich nicht verdeckt werden.
• Erstellen Sie Tooltips nicht isoliert. Berücksichtigen Sie Ihre anderen Nachrichten und planen Sie eine konsistente In-App-Messaging-Strategie, die einen Mehrwert bietet. Messen Sie die Leistung und verfeinern Sie Ihre Nachrichten nach Bedarf.
• Verwenden Sie die Tooltip-Rolle für Inhalte, die als zusätzliche Bedienungshinweise angezeigt werden.
• Verwenden Sie für Tooltips, die den Namen bzw. die Funktion eines grafischen Symbols vermitteln, aria-labelledby auf dem Auslöser. Ein Beispiel wäre der Name "Einstellungen" für ein Zahnradsymbol. Dadurch lesen die Screenreader den Tooltip, wenn der Auslöser den Tastaturfokus erhält. (Beachten Sie, dass aria-labelledby in manchen Browsern nicht mit Elementen, wie div, arbeiten kann, die nicht nativ interaktiv sind oder keine entsprechende Rolle wie role="button" haben.)
• Wenn ein Tooltip zusätzlichen Text enthält, geben Sie das Label mit (verstecktem) Text an und verbinden Sie den Inhalt über aria-describedby.
• Stellen Sie sicher, dass der Zeiger über den Popup-Inhalt verschoben werden kann, weg vom Auslöser, ohne dass der Inhalt dabei automatisch schließt.
• Implementieren Sie eingeblendete Inhalte so, dass sie ohne Änderung des Fokus‘ geschlossen werden können (z. B. über die Escape-Taste). (Beachten Sie jedoch die Hinweise in Probleme beim Schließen von eingeblendeten Inhalten)

Stand: 09.01.2024