- Stufe
- AA
- Seit
- WCAG 2.1
- Einträge
- 17 / 193
1.4.13 Eingeblendete Inhalte bei Hover oder Fokus
Wenn das Zeigen auf ein Element oder das Ansteuern per Tabulatortaste zusätzlichen Inhalt einblendet, muss man ihn schließen, mit dem Zeiger erreichen und so lange sehen können, wie man ihn braucht.
/ Was es verlangt
Das Kriterium betrifft Tooltips, aufklappende Untermenüs und Vorschaukarten, die erscheinen, sobald der Mauszeiger auf einem Bedienelement ruht oder das Element den Tastaturfokus erhält. Es stellt drei Bedingungen an sie. Am stärksten trifft ein Verstoß Menschen, die mit Bildschirmvergrößerung arbeiten: Bei hohem Zoom verdeckt ein Tooltip genau die Stelle, die sie gerade lesen, oder er verschwindet, sobald sie den Zeiger in seine Richtung bewegen. Menschen mit Tremor oder eingeschränkter Feinmotorik verlieren Inhalte, die sich bei einer kleinen Abweichung schließen.
Der Inhalt muss sich schließen lassen, ohne Zeiger oder Fokus zu bewegen, in der Regel mit Escape, es sei denn, er meldet einen Eingabefehler oder verdeckt und ersetzt nichts. Er muss mit dem Zeiger erreichbar sein: Der Zeiger kann vom Auslöser auf den neuen Inhalt wandern, ohne dass dieser sich schließt. Er muss bestehen bleiben, bis Hover oder Fokus entfernt werden, die Person ihn schließt oder die Information nicht mehr gilt. Tooltips, die der Browser selbst zeichnet, etwa aus einem unveränderten title-Attribut, sind ausgenommen.
/ Woran Seiten scheitern
- Ein reiner CSS-Tooltip auf :hover schließt sich, sobald der Zeiger den Auslöser verlässt, und lässt sich deshalb weder mit dem Zeiger erreichen noch bei hohem Zoom lesen.
- Ein eigener Tooltip verdeckt benachbarten Text und Escape bewirkt nichts, sodass er nur verschwindet, wenn man den Zeiger wegbewegt.
- Eine Lücke von wenigen Pixeln zwischen Menüschaltfläche und Untermenü lässt das Untermenü zuklappen, während der Zeiger sie überquert.
- Ein Hinweis verschwindet nach kurzer Zeit per Timer, egal ob man ihn zu Ende gelesen hat.
- Der Tooltip öffnet sich nur bei Maus-Hover und nie bei Tastaturfokus, wodurch Tastaturnutzende ihn gar nicht erhalten und auch Kriterium 2.1.1 verletzt ist.
/ So prüfen Sie es selbst
- Bewegen Sie den Zeiger auf jedes Bedienelement, das einen Tooltip, ein Untermenü oder ein Popover zeigt, und dann vom Auslöser auf den neuen Inhalt. Er muss dabei offen bleiben.
- Drücken Sie bei sichtbarem Inhalt Escape, ohne den Zeiger zu bewegen. Der Inhalt sollte sich schließen, außer er verdeckt nichts oder meldet einen Eingabefehler.
- Steuern Sie dieselben Elemente mit der Tabulatortaste an und prüfen Sie, ob derselbe Inhalt bei Fokus erscheint und bleibt, bis Sie weitergehen oder Escape drücken.
- Lassen Sie den Zeiger eine Weile ruhen und prüfen Sie, ob der Inhalt sich nicht von selbst schließt. Wiederholen Sie den Durchgang mit vergrößerter Browseransicht, in der ein Tooltip eher anderen Inhalt verdeckt.
/ So beheben Sie es
- Ergänzen Sie einen keydown-Listener für Escape, der den Tooltip ausblendet und den Fokus auf dem Auslöser belässt.
- Platzieren Sie den Tooltip so, dass er den Auslöser berührt, und halten Sie ihn offen, solange :hover auf den Auslöser oder auf den Tooltip selbst zutrifft. So kann der Zeiger hinüberwandern.
- Zeigen Sie den Inhalt auch bei Fokus und nicht nur bei Hover (Ereignisse focus und blur oder :focus-visible und :focus-within in CSS) und verbinden Sie ihn über aria-describedby und role="tooltip" mit dem Auslöser.
- Entfernen Sie jedes setTimeout, das den Inhalt ausblendet. Schließen Sie ihn nur bei mouseleave, blur, Escape oder wenn die Information nicht mehr zutrifft.
- Verwenden Sie für alles, was länger als ein kurzer Hinweis ist oder Links enthält, eine Schaltfläche, die den Inhalt auf- und zuklappt, statt eines Hover-Popups.
/ Was unser Scanner prüft
Unsere Prüfung tooltip-hover-only sucht Elemente mit role="tooltip" oder einem Klassennamen, der das Wort tooltip enthält. Sie meldet ein solches Element, wenn kein Bedienelement per aria-describedby darauf verweist und das Element daneben keinen Tastaturfokus annehmen kann. Die Prüfung bewegt keinen Zeiger und kann deshalb nicht feststellen, ob sich ein Tooltip mit Escape schließen lässt, mit dem Zeiger erreichbar ist oder offen bleibt. Diese drei Bedingungen müssen von Hand geprüft werden.
/ Wer es verletzt, nach unseren eigenen Messungen
| Stelle | Sektor | Vorkommen | Wert |
|---|---|---|---|
| Warszawa | city · PL | 49 | 20 |
| Bydgoszcz | city · PL | 42 | 7 |
| Düsseldorf | city · DE | 40 | 9 |
| Zielona Góra | city · PL | 39 | 7 |
| Hamburg | city · DE | 34 | 23 |
| Radom | city · PL | 26 | 2 |
| Wrocław | city · PL | 19 | 2 |
| Politechnika Łódzka | education · PL | 18 | 5 |
| Lublin | city · PL | 16 | 17 |
| Politechnika Wrocławska | education · PL | 14 | 17 |
| Stuttgart | city · DE | 13 | 6 |
| Policja | government · PL | 11 | 12 |
| Trybunał Konstytucyjny | government · PL | 6 | 14 |
| San Diego | city · US | 2 | 63 |
| Houston | city · US | 1 | 7 |
| PKP Intercity | transport · PL | 1 | 2 |
| State of Washington | government · US | 1 | 9 |
Eine Seite je Stelle, automatisch im Wochenrhythmus gemessen. Behebungen seit dem letzten Durchlauf erscheinen beim nächsten, und jede Eintragsseite bietet ein Recht auf Gegendarstellung.
/ Fragen zu diesem Kriterium
Verstößt das title-Attribut gegen WCAG 1.4.13?
Nein. Das Kriterium nimmt Inhalte aus, deren Darstellung der Browser steuert und die der Autor nicht verändert hat, und der native title-Tooltip ist das Standardbeispiel dafür. Eine gute Wahl ist title deshalb nicht: Browser zeigen es nur bei Maus-Hover, sodass Menschen mit Tastatur oder Touchscreen es nie sehen. Wichtige Informationen gehören in sichtbaren Text.
Muss sich ein Tooltip mit Escape schließen lassen?
Das Kriterium verlangt eine Möglichkeit, den Inhalt zu schließen, ohne Zeiger oder Fokus zu bewegen, und Escape ist der übliche Weg dafür. Nicht erforderlich ist das, wenn der Inhalt einen Eingabefehler meldet oder nichts auf der Seite verdeckt oder ersetzt. Ein Tooltip, der über freier Fläche erscheint, besteht das Kriterium also auch ohne diese Möglichkeit.
Gilt 1.4.13 für Menüs und Popover, die sich per Klick öffnen?
Nein. Es gilt für Inhalte, die erscheinen, wenn der Zeiger über etwas schwebt oder etwas den Tastaturfokus erhält, und die wieder verschwinden, wenn Hover oder Fokus enden. Ein Menü oder Dialog, der sich per Klick, Tippen oder Eingabetaste öffnet, fällt nicht darunter. Ein Navigationsuntermenü, das sich bei Hover öffnet, fällt dagegen darunter.