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 zunächst auf das title-Attribut in HTML und weisen auf einige Probleme der Barrierefreiheit hin. Anschließend geben wir einige Tipps zum Einsatz von Tooltips. Anschließend erstellen wir zwei barrierefreie, autorendefinierte Tooltips mit HTML und ARIA, betrachten dann verschiedene CSS-Lösungen und fügen schließlich einen Event-Handler gemäß den Web Content Accessibility Guidelines (WCAG) 2.2 hinzu.

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 schrieb es Steve Faulkner bereits 2013.

Im Hinblick auf die Barrierefreiheit bieten TitleAttribute 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 TitleAttributen wird aber dennoch bei der Fokussierung per Tastatur nicht angezeigt (vor einiger Zeit gab es im Internet Explorer einige Ausnahmen für Formularelemente).

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. HTML rät von der Verwendung des title-Attributs ab:

Ü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. Tooltips sind bestenfalls als Erinnerung oder als kurze Umformulierung einer bestehenden Beschriftung 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 nur beschreibenden und nicht notwendigen Text 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.

CSS zur Hilfe?

Mit CSS können Sie Werte in HTML-Attributen auslesen und als Pseudo-Element auf einer Webseite darstellen. Das können Sie mit einem title-Attribut auch machen, nur werden Sie dadurch manchmal in der Situation kommen, dass zwei Tooltips angezeigt werden. Besser ist es, wenn Sie ein Attribut einsetzen, das nicht (auch) vom Browser angezeigt wird. Im folgenden Beispiel wird ein Tooltip bei Hover und Fokus angezeigt:

Im CSS wird der Inhalt des autorendefinierten data-tooltip-Attributs als Pseudo-Element sichtbar gemacht. Damit wird der Tooltip bei Maus- und Tastaturbedienung gleichermaßen angezeigt. Sie können mit Schritt 3 dieses Beitrags fortsetzen. Das Ergebnis dieses Beispiels unterscheidet gar nicht so sehr von den noch vorzustellenden Lösungen. Allerdings, so einfach die Lösung mit CSS ist, sie widerspricht den wichtigen Grundsatz, Inhalte nur mit HTML umzusetzen.

Anforderungen an die Barrierefreiheit

Ein barrierefreier Tooltip muss 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 bzw. dem Tooltip schwebt oder der Fokus auf dem auslösenden Element steht.
• Stellen Sie sicher, dass alle Nutzende den Tooltip per Light Dismiss einfach schließen können.

Die letzten drei Anforderungen stammen aus
Fatal error: Uncaught Error: Call to undefined function mysql_query() in /home/lfqdu6ah4gh6/migrated_webspace/www/bfw/lib/php/content_func.php:124 Stack trace: #0 /home/lfqdu6ah4gh6/migrated_webspace/www/bfw/lib/php/content_func.php(112): setScLinkToDb() #1 /home/lfqdu6ah4gh6/migrated_webspace/www/bfw/knowhow/tooltip/index.php(97): sclink() #2 {main} thrown in /home/lfqdu6ah4gh6/migrated_webspace/www/bfw/lib/php/content_func.php on line 124