Schritt für Schritt zu barrierefreien Tooltips

Ein Tooltip ist ein kurzer Text, der normalerweise als Popup erscheint, wenn Nutzende mit dem Mauszeiger über ein Element fahren. Tooltips können mit dem title-Attribut an jedes HTML-Element angehängt werden. Es gibt nur wenige Ausnahmen, bei denen ein mit dem title-Attribut erstellter Tooltip nicht angezeigt wird (zum Beispiel bei einem iframe-Element).

In diesem Beitrag blicken wir auf folgende Themen:

• Zunächst schauen wir auf das title-Attribut in HTML. Sie erfahren, was das Problem von title-Attributen ist und welche Anforderungen die Web Content Accessibility Guidelines (WCAG) 2.2 an Popover stellt.
• In Schritt 1 bauen wir das Grundgerüst für ein Tooltip mit HTML und ARIA.
• Tooltips können Sie mit CSS ein- und ausblenden. In Schritt 2 erfahren Sie dazu mehr, sowie zu verschiedenen Techniken für die Positionierung von Tooltips.
• Anschließend fügen wir in Schritt 3 einen Event-Handler hinzu, damit eingeblendete Tooltips per Tastatur geschlossen werden können.
• Im letzten Schritt finden Sie eine alternative Technik für das Ein- und Ausblenden von Tooltips mit der Popover-API.

Das Problem von Title-Attributen

Das title-Attribut ist nicht sonderlich barrierefrei. Das betrifft verschiedene Gruppen von Nutzenden: Wenn Sie Inhalte vor Nutzenden von Mobiltelefonen und Tablets sowie vor Nutzenden von Assistenztechnologien und Nutzenden, die ausschließlich mit der Tastatur arbeiten, verbergen möchten, verwenden Sie das title-Attribut. So schreibt es Steve Faulkner in einem Beitrag aus 2013.

Im Hinblick auf die Barrierefreiheit bieten title-Attribute folgenden Gruppen von Nutzenden unzureichende Unterstützung:

Tastaturnutzende

Da Tastaturnutzende nur aktive Elemente wie Links oder Formulare fokussieren können, können Browser Tooltips nur für solche fokussierbaren Elemente anzeigen. Der Inhalt von title-Attributen wird aber dennoch nicht bei der Fokussierung per Tastatur angezeigt (auch wenn es vor einiger Zeit im Internet Explorer einige Ausnahmen für Formularelemente gab).

Nutzende von Screenreadern

Browser legen den Inhalt eines title-Attributs aktiver Elemente als "accessible description" im Accessibility-Tree ab. In einem Screenreader wird die "accessible description" üblicherweise an den Linknamen angehängt, wenn der Link per Tab-Taste fokussiert wird. Dies kann in bestimmten Situationen hilfreich sein, jedoch navigieren Nutzende von Screenreadern nicht unbedingt mit der Tab-Taste, weil dadurch nicht fokussierbare Inhalte übersprungen werden. Ein title-Attribut kann dennoch bei Links, Formularen und anderen aktiven Elementen in einem Screenreader ermittelt werden.

Nutzende von Vergrößerungssystemen

Die Verwendung eines Vergrößerungssystems kann dazu führen, dass Tooltips nicht mehr gelesen werden können. Tooltips mit einem title-Attribut werden nur angezeigt, wenn sich der Mauszeiger über dem auslösenden Element befindet. Durch die Verwendung eines Vergrößerungssystems kann der tatsächlich sichtbare Teil des Ansichtsbereichs erheblich reduziert werden. In diesem Fall müssen Nutzende den Mauszeiger bewegen, um den Bildschirmausschnitt zu verschieben und den vollständigen Text zu lesen. Sobald sich der Mauszeiger jedoch über dem Tooltip befindet, wird der Tooltip vom Browser ausgeblendet.

Hinweis: Die Vergrößerungsstufen variieren stark; 20-fache, 30-fache oder sogar höhere Vergrößerungen sind durchaus möglich. Je höher die Vergrößerung, desto kleiner der angezeigte Bildschirmausschnitt.

Wenn Sie noch nicht überzeugt sind, dass Tooltips problematisch sein können, vielleicht überzeugt Sie der HTML-Standard. Im Standard wird von der Verwendung des title-Attributs abgeraten:

Überdenken Sie den Einsatz von Tooltips

Wenn Sie Tooltips auf Ihren Webseiten einsetzen möchten, sollten Sie sie zurückhaltend einsetzen. Im Web finden Sie zahlreiche Empfehlungen, wann Tooltips sinnvoll sind und wann nicht, zum Beispiel:

• Fügen Sie keine wichtigen Informationen in Tooltips ein. Informationen, die für die Erledigung einer Aufgabe erforderlich sind, müssen für alle Nutzende jederzeit zugänglich sein.
• Vermeiden Sie redundante oder überflüssige Texte in Tooltips. Solche Tooltips wirken bestenfalls ablenkend.
• Halten Sie Tooltips kurz. Es sind bestenfalls kurze Erinnerung oder knappe Umformulierungen von bestehenden Beschriftungen als Tooltips geeignet.
• Tooltips sollten keine anderen relevanten Inhalte überlagern. Beispielsweise sollte der Tooltip die Beschriftung eines Formularfelds nicht verdecken.

Am wichtigsten ist es aber, dass Tooltips keine notwendigen Texte enthalten und aktive Elemente wie Links und Formularfelder etwas detaillierter beschreiben. Für HTML-Konformität dürfen Tooltips mit dem title-Attribut letztendlich nur solche Informationen enthalten, die bereits auf der Webseite vorhanden sind.

Anforderungen an die Barrierefreiheit von Tooltips

Barrierefreier Tooltips müssen im Allgemeinen folgende Anforderungen erfüllen. Denken Sie insbesondere an Tastaturnutzende und Nutzende von Assistenztechnologien wie Screenreader und Vergrößerungssysteme:

• Verwenden Sie korrekte Semantik (HTML und ARIA).
• Stellen Sie sicher, dass der Tooltip per Tastatur angezeigt werden kann.
• Stellen Sie sicher, dass der Tooltip nicht ausgeblendet wird, solange der Zeiger über dem auslösenden Element beziehungsweise dem Tooltip schwebt oder der Fokus auf dem auslösenden Element steht.
• Stellen Sie sicher, dass Nutzende den Tooltip per Light Dismiss einfach schließen können.

Die letzten drei Anforderungen stammen aus Erfolgskriterium 1.4.13 der WCAG 2.2. Das Erfolgskriterium ist dabei nicht auf title-Attribute anwendbar, sondern nur auf autorendefinierte Tooltips.

Wir werden uns Schritt für Schritt an eine gute Umsetzung eines autorendefinierten Tooltips herantasten. Wir werden mit verschiedenen Beispielen arbeiten.