Tooltips und Barrierefreiheit

Tooltips sind in der digitalen Welt weit verbreitet. Sie bieten zusätzliche Informationen und dienen dazu, Nutzern bestimmte Elemente auf einer Website oder in einer Anwendung näher zu erklären. Obwohl sie oft als nützlich wahrgenommen werden, können sie auch Barrieren schaffen, insbesondere für Menschen mit Behinderungen. 

Was ist ein Tooltip?

 Ein Tooltip ist ein kleiner Hinweistext, der erscheint, wenn ein Benutzer mit der Maus über ein Element fährt oder ihn auswählt. Sie werden auch Quickinfo genannt und meist durch Interaktionen wie den Hover-Effekt oder Mouseover sichtbar. Ein Tooltip in HTML kann einfach mit dem title-Attribut definiert werden, während ein CSS Tooltip mithilfe von Pseudoelementen wie :hover gestaltet werden kann. 

Tooltip-Text wird oft verwendet, um: 

• Kurzbeschreibungen für Symbole oder Buttons bereitzustellen. 
• Erklärungen zu Formularfeldern oder interaktiven Elementen zu liefern. 
• Zusätzliche Informationen anzuzeigen, ohne die Oberfläche zu überladen. 

Warum sind Tooltips problematisch für die Barrierefreiheit? 

Obwohl Tooltips nützlich sein können, bringen sie erhebliche Barrierefreiheitsprobleme mit sich. Viele davon sind auf die Art und Weise zurückzuführen, wie sie gestaltet und angezeigt werden: 

Probleme bei der Nutzung von des Mouseover-Effekts 

• Zugänglichkeit für Screenreader: Standard-Tooltips, die mit dem title-Attribut erstellt werden, sind für Screenreader oft schwer zugänglich. Sie werden entweder gar nicht oder zu spät vorgelesen. 
• Hover- und Mouseover-Abhängigkeit: Benutzer, die keine Maus verwenden können – etwa Personen mit motorischen Einschränkungen –, können Quickinfos nur schwer aktivieren. 
• Fehlende Tastaturunterstützung: Viele Tooltips sind nicht per Tastatur auslösbar, was gegen die WCAG-Kriterien für Barrierefreiheit verstößt. 
• Kurze Anzeigedauer: Quickinfos verschwinden oft zu schnell, was Menschen mit Seh- oder kognitiven Beeinträchtigungen Probleme bereitet. 

Native Tooltip vs. Custom Tooltip 

Es gibt zwei Hauptarten von der Quickinfos: native Tooltips (z. B. mit dem title-Attribut) und benutzerdefinierte Tooltips, die individuell mit CSS oder JavaScript erstellt werden. 

Native Tooltips werden direkt in HTML mithilfe des title-Attributs erstellt. Diese Variante ist einfach umzusetzen und benötigt keine zusätzliche Programmierung. Allerdings bieten native Tooltips nur begrenzte Gestaltungsmöglichkeiten und sind oft schlecht für Screenreader zugänglich, was ihre Nutzbarkeit für Menschen mit Behinderungen stark einschränkt. 

Im Gegensatz dazu sind benutzerdefinierte Tooltips flexibler, da sie mit CSS oder JavaScript individuell gestaltet werden können. Diese Methode ermöglicht es, das Design, die Position und das Timing der Anzeige exakt zu steuern. Wenn Custom Tooltips korrekt implementiert werden, können sie deutlich barrierefreier sein als native Varianten. So lassen sie sich beispielsweise so gestalten, dass sie auch per Tastatur bedienbar und für Screenreader zugänglich sind. 

Gesetzliche Grundlagen: WCAG und BITV 

Die Barrierefreie-Informationstechnik-Verordnung (BITV) und die Web Content Accessibility Guidelines (WCAG) bieten wertvolle Leitlinien, um Tooltips barrierefrei zu gestalten und Probleme bei der Nutzung zu minimieren. Während die BITV klare Anforderungen für benutzerdefinierte Tooltips festlegt, bleibt die Nutzung von automatischen Tooltips, wie sie durch das title-Attribut erzeugt werden, problematisch. Die WCAG raten explizit davon ab, title-Attribute zu verwenden. 

BITV-Anforderungen für barrierefreie Tooltips 

Für zusätzliche Inhalte, die bei Hover-Effekten oder Tastaturfokus eingeblendet werden, wie benutzerdefinierte Tooltips oder Dropdown-Menüs, gibt die BITV einige Anforderungen für Barrierefreiheit vor: 

1. Interaktion ermöglichen: Benutzer müssen mit dem Tooltip interagieren können, ohne dass er verschwindet, etwa indem sie den Mauszeiger über den eingeblendeten Tooltip bewegen. 
2. Schließen ohne Fokusverlust: Der Tooltip sollte durch eine klare Aktion, wie das Drücken der Escape-Taste, geschlossen werden können, ohne den Fokus von anderen Elementen zu verschieben. 
3. Keine automatische Schließung: Eingeblendete Inhalte dürfen nicht automatisch verschwinden, sondern nur durch eine bewusste Nutzeraktion geschlossen werden. 

Empfehlungen für barrierefreie Tooltips 

Quickinfos können Teil einer barrierefreien Website sein, wenn sie mit Bedacht gestaltet werden. Hier sind einige Tipps:

• Tastaturzugänglichkeit sicherstellen: Ein Tooltip sollten nicht nur durch Mouseover, sondern auch per Tastatur (z. B. mit der Tab-Taste) aktiviert werden können. 
• Ausreichende Anzeigedauer: Nutzer sollten genug Zeit haben, um den Tooltip-Text zu lesen. 
• Alternative Informationsquellen: Wichtige Informationen sollten nicht ausschließlich in Quickinfos enthalten sein, sondern auch sichtbar oder durch Screenreader zugänglich gemacht werden. 
• ARIA-Attribute verwenden: Mit ARIA-Rollen wie aria-label oder aria-describedby können Sie sicherstellen, dass Screenreader die Tooltip-Inhalte korrekt interpretieren. 

Wenn Sie sicherstellen möchten, dass Ihr Online-Angebot – einschließlich der Nutzung von Tooltips – den Anforderungen der Barrierefreiheit entspricht, kann das UserWay Accessibility Widget Ihnen helfen. Auf diese Weise können Barrieren erkannt und beseitigt werden, um ein optimales Nutzererlebnis für alle zu gewährleisten. 

Wann sind Quickinfos sinnvoll und wann nicht? 

Tooltips sind sinnvoll, wenn sie: 

• Zusätzliche, aber nicht kritische Informationen bereitstellen. 
• Eine Benutzeroberfläche übersichtlich halten. 
• Benutzerfreundlichkeit durch kontextbezogene Erklärungen verbessern. 

Tooltips sind nicht geeignet, wenn: 

• Sie die einzige Informationsquelle für wichtige Inhalte sind. 
• Sie zu kurz oder schlecht zugänglich gestaltet sind. 

FAQ – Häufig gestellte Fragen zu Tooltips 

Welcher Text wird als Tooltip angezeigt? 

Der angezeigte Text liefert meist zusätzliche Informationen zu Symbolen, Buttons oder Eingabefeldern. Häufig wird er verwendet, um Funktionen zu erklären oder Hinweise zu geben. 

Ist Mouseover barrierefrei?

 Mouseover allein ist nicht barrierefrei, da Nutzer ohne Maus oder mit motorischen Einschränkungen Tooltips oft nicht aktivieren können. 

Sind Tooltips notwendig? 

Tooltips sind nützlich, sollten jedoch nie die einzige Quelle für wichtige Informationen sein. Sie können ergänzend eingesetzt werden, wenn sie gut gestaltet und zugänglich sind. 

Wie lang darf ein Tooltip sein? 

Es gibt keine offizielle Zeichenvorgabe für die Länge eines Tooltips, doch die WCAG (Web Content Accessibility Guidelines) empfehlen, Tooltips kurz und prägnant zu halten. Ideal sind ein bis zwei Sätze oder etwa 70–100 Zeichen, damit die Information leicht erfasst werden kann, ohne die Nutzer zu überfordern. 

Warum sind Tooltips für Benutzer der Bildschirmvergrößerung problematisch? 

Tooltips verschwinden oft, sobald der Mauszeiger bewegt wird, was für Nutzer mit Bildschirmvergrößerung problematisch ist, da sie Tooltip und Element nicht gleichzeitig sehen können. Außerdem liegen Tooltips häufig außerhalb des vergrößerten Bereichs, wodurch wichtige Informationen unbemerkt bleiben. 

Wo sollen die Tooltips platziert werden? 

Tooltips sollten so nah wie möglich am zugehörigen Element platziert werden, damit Nutzer den Bezug sofort erkennen. Ideal ist eine Position oberhalb, unterhalb oder seitlich des Elements, je nach verfügbarem Platz und Lesbarkeit. Wichtig ist, dass der Tooltip nicht den Hauptinhalt verdeckt.