Tooltips - Zusatzinformationen in überlagerndem Fenster
[Materialsammlung]
Ein Tooltip ist eine Komponente, mit der Zusatzinformationen zu einem fokussierbaren Element in einem Fenster, das über dem ursprünglichen Inhalt eingeblendet wird.
Aus Gründen der Barrierefreiheit und Nutzungsfreundlichkeit sollten Zusatzinformationen in der Regel permanent sichtbar in der unmittelbaren Nähe des Elements dargestellt werden. Ein Tooltip ist dann verzichtbar.
WCAG Anforderungen
Folgende Erfolgskriterien aus den Richtlinien für barrierefreie Webinhalte (WCAG) sind zu erfüllen:
- 2.4.6 Überschriften und Beschriftungen
- Wenn möglich, beschreibt die Beschriftung eines Steuerelements so präzise dessen Funktion, dass eine beschreibende Zusatzinformation nicht nötig ist.
- Erfolgskriterium 2.1.1 Tastatur
- Das Element mit der Zusatzinformation im Tooltip muss allein mit der Tastatur erreicht werden können. Bei fokussierbaren Elementen (Links, Schalter und Formularelemente mit HTML-Semantik) gelingt dies ohne weiteres durch Drücken der Tabulator-Taste.
- Durch erneutes Drücken der Tabulator-Taste wird der Tooltip entfernt.
- In begründeten Ausnahmefällen können Elemente mit dem Attribut
tabindex="0"fokussierbar gemacht werden. - Typischerweise kann der Tooltipp durch Drücken von Escape geschlossen und damit entfernt werden.
Diskussion der Realisierung
Mit Stand April 2022 konnte sich die Accessible Rich Internet Applications (ARIA) Working Group weder auf ein empfohlenes Schema noch ein Beispiel einigen.
Diskussionsstand und Diskussionsverlauf können auf GitHub öffentlich verfolgt werden:
- WAI-ARIA Authoring Practices 1.2 | Tooltip Widget
- Arbeitspapier für eine aktualisierte Version (W3C Editor's Draft)
- Develop example of tooltip design pattern #127
- Diskussion zum Erstellen eines Beispiels.
- Draft tooltip design pattern #128
- Diskussion zum Erstellen eines empfohlenen Darstellungschemas.