Schritt für Schritt zu barrierefreien Tooltips

veröffentlicht in 2015

zuletzt bearbeitet in

CSS für Tooltips (2/4)

Mit CSS können Sie ein Tooltip positionieren. Sie können mit CSS auch das Ein- und Ausblenden eines autorendefinierten Tooltips steuern. Für eine barrierefreie Umsetzung des Ein- und Ausblendens müssen Sie folgende Bedingungen aus Erfolgskriterium 1.4.13 der Web Content Accessibility Guidelines (WCAG) 2.2 erfüllen:

  1. Der Tooltip ist überfahrbar, das heißt der Zeiger kann über den Tooltip bewegt werden, ohne dass der Tooltip 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. Sie finden ein kurzes Video dazu in der Einleitung zu diesem Beitrag.
  2. Der Tooltip ist beständig, das heißt der Tooltip bleibt sichtbar, bis der Auslöser des Hover oder Focus entfernt wird. Manche Nutzende haben Schwierigkeiten, den angezeigten Inhalt zu lesen oder überhaupt wahrzunehmen, wenn der Tooltip nach kurzer Zeit wieder verschwindet.

die Anzeige eines Tooltips muss darüber hinaus nicht nur per Zeiger, sondern auch per Tastatur möglich sein. Diesen Aspekt der Barrierefreiheit können Sie ebenfalls mit CSS umsetzen.

Hinweis: CSS ist für die Positionierung des Tooltips notwendig. Für das Ein- und Ausblenden gibt es eine Alternative mit dem Popover-API. Diese Technik wird in Schritt 4 vorgestellt.

Klassische Techniken für Positionierung und Einblendung von Tooltips

Klassische Techniken für die Positionierung von Tooltips kennzeichnen sich dadurch aus, dass Tooltips absolut positioniert werden und eine z-index-Eigenschaft benötigen.

In Schritt 1 haben wir einen Grundgerüst für einen Link mit Tooltip vorgestellt. Dabei wurde der Tooltip für den Link innerhalb des Links platziert. Der Grund dafür ist, dass der Tooltip innerhalb eines relativ positionierten Elternelements absolut positioniert werden kann.

Auch das Ein- und Ausblenden von Tooltips ist mit verschachtelten Tooltips per CSS unkompliziert. Die folgenden CSS-Deklarationen positionieren ein Tooltip bei Fokus und Hover.

Linktext

Beachten Sie, dass der Tooltip in diesem Beispiel per Zeiger überfahren werden kann. Das liegt daran, dass der Tooltip ein Kindelement des Links ist.

Der Tooltipp für das Eingabefeld aus Schritt 1 wird auf gleicher Weise realisiert. Nur die Selektoren ändern sich:

Es gibt verschiedene Techniken, Tooltips anzuzeigen. Sie könnten beispielsweise ein Tooltip mit einem aria-description-Attribut statt mit einem aria-describedby-Attribut (für Screenreader) bereitstellen.

Um den Wert eines aria-description-Attributs als Tooltip anzuzeigen, benötigen sie die attr()-Funktion in CSS. Den Wert können Sie als Pseudo-Element auf einer Webseite darstellen. Die Technik ist grundsätzlich mit dem title-Attribut auch möglich, 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. Das Beispiel unterscheidet sich im Wesentlichen nur durch die Anzeige des Tooltips als Pseudo-Element und durch den Einsatz der attr()-Funktion von den vorherigen Beispielen.

ARIA und die Accessibility-API

Diese klassischen Techniken dürfen grundsätzlich genutzt werden. Wie bei allen Beispielen auf dieser Seite fehlt aber noch ein Light dismiss für die Tastaturbedienung.

Anchor Positioning für Tooltips

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

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 und flexible Positionierung eines Tooltips relativ zu einem anderen Element (dem "Anker") festlegen.

Zunächst einmal sind Sie nicht mehr darauf angewiesen, Ihre Tooltips innerhalb von Links oder anderen Elementen zu verschachteln; eine z-index-Eigenschaft benötigen Sie im Übrigen auch nicht mehr. Den HTML-Code können Sie wie folgt umstrukturieren, wobei Sie die Lesereihenfolge des Codes immer noch beachten müssen: Der Link könnte wie folgt angepasst werden:

<p>
  <a aria-describedby="me2" href="https://www.seitenadresse.de/">
    Linktext
  </a>
  <span id="me2" class="tooltip2" hidden> hilfreicher, aber nicht notwendiger Tooltip </span>
</p>

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. Das Element mit dem 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:

Linktext

Bitte beachten Sie, dass wir einen dritten Selektor für die Einblendung des Tooltips benötigen. Nutzende müssen mit dem Zeiger den Tooltip überfahren können. Dieser dritte Selektor wird dann nicht benötigt, wenn die Ein- und Ausblendung des Tooltips mit der Popover-API erfolgt.

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:

Auch in diesem Beispiel benötigen wir einen dritten Selektor für die Einblendung des Tooltips, damit der Tooltip mit einem Zeiger überfahren werden kann. Er wird mit dem Einsatz des Popover-APIs wie im Beispiel zuvor überflüssig.

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