Schritt für Schritt zu barrierefreien Tooltips

Die Popover-API für Tooltips

In diesem Beitrag wurden bereits folgende Punkte besprochen:

1. Anforderungen an das HTML,
2. Möglichkeiten der Positionierung und der Einblendung mit CSS sowie
3. ein Event-Handler, um ein Tooltip mit der Escape-Taste zu schließen.

Vor allem die Anforderungen der zweiten und dritten Punkte ergeben sich aus Erfolgskriterium 1.4.13 der Web Content Accessibility Guidelines (WCAG) 2.2. Insbesondere ist es bei der Nutzung eines Vergrößerungssystems erforderlich, dass nach dem Einblenden eines Tooltips der Zeiger (mit dem verkleinerten Bildschirmausschnitt) zum eingeblendeten Inhalt bewegt werden kann. Nur dann werden Nutzende den Inhalt lesen können. Falls der Tooltip ausgeblendet wird, wenn der Zeiger ihn überfährt, wird es nicht möglich sein, den Tooltip bei starker Vergrößerung zu lesen. Sie finden dazu ein kurzes Video in der Einleitung zu diesem Beitrag.

HTML bietet auch die Popover-API. Mit der showPopover()- und hidePopover()-Methoden können Sie folgende Aspekte des bisher vorgestellten Tooltips vereinfachen:

• Ein- und Ausblendung eines Tooltips und.
• Schließen von Tooltips per Escape-Taste.

Mit der showPopover()-Methode kann ein HTML-Element mit einem popover-Attribut eingeblendet werden. Das HTML entspricht ansonsten dem Grundgerüst aus Schritt 1 dieses Beitrags. Die Positionierung des Tooltips erfolgt nach wie vor mit Anchor Positioning. Die Ein-und Ausblendung erfolgt mit der Popover-API. Mit der Popover-API stellen Browser die Funktionalität des Ausblendens des Tooltips per Escape-Taste bereit.

Sie sollten bei diesem Beispiel folgende Punkte beachten:

• Das popover-Attribut wirkt wie ein hidden-Attribut und sorgt dafür, dass das div-Element zunächst für alle verborgen ist und erst dann angezeigt wird, wenn die showPopover()-Methode aufgerufen wird.
• Solange der Fokus auf dem Link steht, kann der Tooltip mit der Escape-Taste geschlossen werden.
• Wenn der Tooltip eingeblendet wird, kann der Zeiger über den Tooltip bewegt werden, ohne dass er ausgeblendet wird. Auch wenn der Zeiger über Link oder Tooltip schwebt, kann der Tooltip mit der Escape-Taste ausgeblendet werden.