Schritt für Schritt zu barrierefreien Tooltips

Tooltip geräteunabhängig ein- und ausblenden (2/3)

Damit ein Tooltip barrierefrei ist, muss seine Anzeige nicht nur für Maus- und Touch-Nutzende, sondern auch für Tastaturnutzende möglich sein. Grundsätzlich gibt es zwei Ansätze für die Anzeige eines Tooltips per Tastatur:

1. Automatische Anzeige des Tooltips, sobald das auslösende Element den Fokus erhält.
2. Bereitstellung eines Tastaturkürzels zum Öffnen des Tooltips für das fokussierte Element.

Der erste Ansatz macht Tooltips für Tastaturnutzende leicht auffindbar. Enthält eine Webseite jedoch viele Tooltips, kann die ständige Anzeige überflüssiger Informationen ablenkend wirken. Der Vorteil des zweiten Ansatzes zum Öffnen des Tooltips liegt darin, dass Nutzende ihn nur bei Bedarf anzeigen lassen können. Der zweite Ansatz hat jedoch auch Nachteile:

• Bestandteile der Benutzerschnittstelle mit Tooltips benötigen eine visuelle Kennzeichnung, die auf das Vorhandensein eines Tooltips hinweist.
  Hinweis: Die Kennzeichnung ist nur für sehende Nutzende bestimmt und sollte für Screenreader nicht zugänglich sein. Screenreader greifen über das aria-describedby-Attribut auf den Tooltip zu.
• Es ist für Nutzende nicht erkennbar, ob der Tooltip zusätzliche (hilfreiche) oder überflüssige Informationen enthält.
• Das Verwenden von Tastaturkürzeln zum Ein- und Ausblenden von Tooltips erscheint unnötig. Es gibt zudem kein standardisierten Tastaturkürzel zum Anzeigen eines Tooltips. Wählen Sie diese Technik, sollten Sie einen plattformübergreifenden Tastaturkürzel bestimmen, beispielsweise die Leertaste.

Wir schauen uns daher nur den ersten Ansatz an. Dieser entspricht eher dem erwarteten Verhalten eines Tooltips.

Sie müssen folgende zwei Punkte für die Gestaltung einer automatischen Anzeige eines Tooltips beachten:

• Wenn Tooltips beim Überfahren mit der Maus oder beim Fokussieren mit der Tastatur eingeblendet werden, müssen sie so lange sichtbar bleiben, bis Nutzende den Mauszeiger oder den Fokus wieder entfernen. Manche Nutzende haben Schwierigkeiten, den angezeigten Inhalt zu lesen oder überhaupt wahrzunehmen, wenn der Tooltip nach kurzer Zeit wieder verschwindet.
• Insbesondere Nutzende, die ein Vergrößerungssystem mit starker Vergrößerung verwenden, können nur kleine Ausschnitte des Ansichtsbereichs sehen. Um sich einen Überblick über den Inhalt zu verschaffen, müssen Nutzende den Vergrößerungsausschnitt verschieben können, wobei der vergrößerte Bereich dem Mauszeiger folgt. Der Tooltip muss so lange angezeigt werden, wie sich der Mauszeiger sowohl über dem auslösenden Element als auch über dem Tooltip befindet. Sie finden ein kurzes Video auf der Seite Schritt für Schritt zu barrierefreien Tooltips.

Absolute Positionierung mit verschachtelten HTML-Elementen

Das Ein- und Ausblenden von Tooltips per CSS ist mit verschachtelten Tooltips unkompliziert. Die folgenden CSS-Deklarationen erlauben beispielsweise autorendefinierte Tooltips für den Link, der in Schritt 1 dieses Beitragsvorgestellt wurde. Mit der position-Eigenschaft können Sie den Tooltip unterhalb des Links platzieren.

Der Tooltipp für das Eingabefeld wird auf der gleichen Weise realisiert. Nur die Selektoren ändern sich:

Anchor Positioning für Tooltips

Bei der Anzeige von Tooltips gibt es in der Praxis einiges mehr zu beachten, zum Beispiel:

• Wo soll der Tooltip angezeigt werden – oberhalb, unterhalb oder seitlich des auslösenden Elements?
• Was soll passieren, wenn der Tooltip aus dem Ansichtsbereich ragt?
• Können Tooltips flexibel mit CSS angezeigt werden oder ist JavaScript erforderlich?
• Ist eine bestimmte JavaScript-Bibliothek notwendig, um eigene Tooltips barrierefrei zu erstellen?

Zum Glück bietet CSS alles, was Sie für die Positionierung von Tooltips benötigen. Mit Anchor Positioning können Sie eine präzise Positionierung eines Elements wie einen Tooltip relativ zu einem anderen Element (dem "Anker") festlegen.

Zunächst einmal sind Sie nicht mehr darauf angewiesen, Ihre Tooltips für Links innerhalb der Links zu verschachteln. Sie können Ihren HTML-Code umstrukturieren, sollten aber die Lesereihenfolge berücksichtigen. Der Link könnte wie folgt angepasst werden:

Damit Anchor Positioning funktioniert, müssen Sie dem Grunde nach zwei Dinge tun:

1. Der Anker (also hier der Link) benötigt einen (oder mehrere) Ankernamen. Der Tooltip muss mit einem Ankernamen explizit verknüpft werden.
2. Das zu positionierende Element wird zunächst mitten auf den Bildschirm platziert. Die CSS-Eigenschaften dafür legt der Browser fest. Sie müssen einige dieser Eigenschaften in Ihrem CSS modifizieren, allen voran margin und inset, damit beispielsweise ein Tooltip an seinem auslösenden Element ausgerichtet werden kann.

Darüber hinaus steht Ihnen die anchor()-Funktion zur verfügung. Mit dieser CSS-Funktion können Sie die Position des Ankers auslesen und zur Positionierung des Tooltips verwenden. Der Link und der Tooltip könnten folgende Eigenschaften erhalten:

Der Tooltip muss nicht mit den top- oder left-Eigenschaften ausgerichtet werden. Anchor Positioning bietet auch die position-area-Eigenschaft an. Der Tooltip für das Eingabefeld aus Schritt 1 könnte dann wie folgt positioniert werden:

Anchor Positioning bietet zahlreiche weitere Eigenschaften. Eine Einführung dazu finden Sie auf dem Mozilla Developer Network.