Barrierefreie Tooltips

Shops nutzen Tooltips für das „i“-Icon neben dem Hinweis zur Mehrwertsteuer, für Erklärungen zu Lieferzeiten, für Icon-Buttons im Header und für Größenhinweise. Sie wirken einfach, aber ein Tooltip, der nur beim Darüberfahren mit der Maus erscheint, ist für Tastatur- und Touch-Nutzer unsichtbar, und einer, der Inhalt verdeckt und sich nicht schließen lässt, ist ein WCAG-Fehler. Diese Seite gehört zur Reihe barrierefreie UI-Muster.

Wann ein Tooltip passt

Das APG beschreibt einen Tooltip als „ein Popup, das Informationen zu einem Element anzeigt, wenn das Element den Tastaturfokus erhält“ oder die Maus darüber schwebt. Verwenden Sie ihn nur für eine kurze, nicht wesentliche Beschreibung eines Bedienelements – eine Beschriftung für einen Icon-Button, einen Hinweis. Wichtige Informationen (Preise, Lieferbedingungen, Rückgaberegeln) gehören in sichtbaren Text. Interaktiver Inhalt gehört in eine Disclosure oder einen Dialog.

Hinweis: Das APG sagt, das Tooltip-Muster sei „in Arbeit; es hat noch keinen Konsens der Arbeitsgruppe“. Behandeln Sie es als Richtlinie und testen Sie mit echter assistiver Technologie.

Relevante WCAG-Kriterien

• 1.4.13 Inhalt bei Hover oder Fokus (AA). Inhalt, der bei Hover oder Fokus erscheint, muss sein:

  • verwerfbar – „ein Mechanismus steht zur Verfügung, um den zusätzlichen Inhalt zu verwerfen, ohne den Zeiger-Hover oder den Tastaturfokus zu bewegen“ (meist Escape), es sei denn, er teilt einen Eingabefehler mit;
  • überfahrbar – der Zeiger kann über den Tooltip fahren, ohne dass er verschwindet;
  • beständig – er bleibt, bis der Auslöser entfernt wird, der Nutzer ihn verwirft oder die Information nicht mehr gültig ist.

  Das Kriterium gilt nicht für Inhalte, deren Darstellung der Browser steuert; das W3C nennt als Hauptbeispiel den Browser-Tooltip des Attributs title.

• 2.1.1 Tastatur (A): Was beim Darüberfahren erscheint, muss auch per Tastatur erreichbar sein.

• 4.1.2 Name, Rolle, Wert (A): Ein Icon-Button braucht einen Namen; ein Tooltip allein ist kein verlässlicher Name.

• 1.4.3 Kontrast (Minimum) (AA): Tooltip-Text braucht 4,5:1.

• 2.4.11 Fokus nicht verdeckt (Minimum) (AA): Ein Tooltip darf das fokussierte Element nicht vollständig überdecken.

Codebeispiel

<!-- Tooltip as description of a focusable control (APG pattern) -->
<button type="button" class="icon-btn" aria-describedby="tip-compare">
  <svg aria-hidden="true" focusable="false"><use href="#icon-compare"></use></svg>
  <span class="visually-hidden">Vergleichen</span>
</button>
<div id="tip-compare" role="tooltip" hidden>Zur Vergleichsliste hinzufügen</div>

<!-- Toggletip: information opened by click, not on hover -->
<button type="button" aria-expanded="false" aria-controls="vat-info">
  <span class="visually-hidden">Zur Mehrwertsteuer</span>
  <svg aria-hidden="true" focusable="false"><use href="#icon-info"></use></svg>
</button>
<p id="vat-info" hidden>Die Preise enthalten die Mehrwertsteuer für Ihr Lieferland.</p>

Skript für den Tooltip: Zeigen Sie ihn bei focus und mouseenter, verbergen Sie ihn bei blur und bei mouseleave sowohl des Auslösers als auch des Tooltips (damit der Zeiger auf ihn wechseln kann), und verbergen Sie ihn bei Escape, während der Fokus auf dem Auslöser bleibt. Das APG sagt: „Tooltip-Widgets erhalten keinen Fokus“ und „der Fokus bleibt auf dem auslösenden Element, solange der Tooltip angezeigt wird“. Der Auslöser verweist per aria-describedby auf den Tooltip.

Das zweite Beispiel ist ein Disclosure-Button, dasselbe APG-Muster, aus dem Akkordeons gebaut sind: Er schaltet aria-expanded um, und der Inhalt bleibt sichtbar, bis der Nutzer ihn schließt – besser für Touchscreens und für längeren Text.

Tastaturbedienung

Typische Fehler in Online-Shops

• Tooltips nur beim Darüberfahren an „i“-Icons, die span-Elemente sind, sodass Tastatur- und Touch-Nutzer Hinweise zu Lieferung oder Mehrwertsteuer nie sehen.
• Wichtige Bedingungen nur in einem Tooltip: Rückgabefristen, Versandkosten, „Preis pro Kilogramm“.
• Der Tooltip verschwindet, wenn der Zeiger sich darauf zubewegt, sodass Menschen mit Bildschirmlupe ihn nicht lesen können.
• Kein Escape, und der Tooltip verdeckt das nächste Formularfeld.
• Links in einem Tooltip („Mehr erfahren“), die nie den Fokus erhalten können.
• Icon-Buttons, die nur über title benannt sind, was bei Fokus oder Touch nicht angezeigt wird.
• Tooltip-Text mit geringem Kontrast, zum Beispiel hellgrau auf weiß.

Was automatische Prüfungen finden und was manuell zu testen ist

Alle sind Karten in unserer Regelbibliothek. 1.4.13 lässt sich nicht automatisch testen: Die Prüfung sieht die Seite, wie sie lädt, nicht das, was bei Hover oder Fokus erscheint. Testen Sie manuell: Tabben Sie zu jedem Auslöser, prüfen Sie, dass der Tooltip erscheint, drücken Sie Escape, fahren Sie mit der Maus auf ihn, zoomen Sie auf 200 % und prüfen Sie, dass er lesbar bleibt. Die Browser-Erweiterung hilft beim Rest der Seite.

Beginnen Sie mit der kostenlosen Prüfung einer Seite. Sie ist eine automatische Prüfung, kein vollständiges Audit.

Häufige Fragen

Welches WCAG-Kriterium gilt für Tooltips?

1.4.13 Inhalt bei Hover oder Fokus (Stufe AA). Inhalt, der bei Hover oder Fokus erscheint, muss verwerfbar sein, ohne Zeiger oder Fokus zu bewegen, überfahrbar, damit der Zeiger auf ihn wechseln kann, und beständig, bis der Nutzer den Auslöser entfernt oder ihn verwirft.

Ist das Attribut title ein barrierefreier Tooltip?

Der Browser-Tooltip des Attributs title liegt außerhalb des Geltungsbereichs von 1.4.13, weil der Browser ihn steuert. Für wichtige Informationen ist er trotzdem ein schlechter Weg: Er wird weder bei Tastaturfokus noch auf Touchscreens angezeigt.

Was ist das APG-Muster Tooltip?

Ein Popup mit role="tooltip", das erscheint, wenn das Element den Tastaturfokus erhält oder der Zeiger darüber schwebt; der Auslöser verweist per aria-describedby darauf, der Tooltip erhält nie den Fokus, und Escape verwirft ihn. Das APG sagt, das Muster sei noch in Arbeit und ohne Konsens der Arbeitsgruppe.

Darf ein Tooltip Links oder Buttons enthalten?

Nein. Ein Tooltip erhält nie den Fokus, sodass interaktiver Inhalt darin nicht erreichbar ist. Nutzen Sie stattdessen eine Disclosure oder einen nicht modalen Dialog, der sich per Klick öffnet.

Kann eine automatische Prüfung Tooltips testen?

Sie findet Elemente mit role="tooltip" ohne Namen und Icon-Buttons ohne Namen. Ob der Tooltip bei Fokus erscheint, beim Überfahren bleibt und sich mit Escape schließt, muss manuell getestet werden.

Quellen

• W3C WAI, APG Tooltip pattern: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
• W3C, Understanding 1.4.13 Content on Hover or Focus: https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html
• W3C WAI, APG Disclosure pattern: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/