Erfolgskriterium 1.4.13
Inhalt bei Hover oder Fokus

5. Mai 2022

Es geht um das visuelle Verhalten von Tooltips und einblendbaren Untermenüs. Das sind zusätzliche Informationen und Funktionalitäten, die aus der überwiegenden Erfahrung vieler beim Überstreichen mit der Maus erscheinen.

Solche Mechanismen sollten weithin vermieden werden. Für die Vermittlung von Zusatzinhalten gibt es bessere Strategien.

Wenn Tooltips und erwähnte Untermenüs erforderlich erscheinen, müssen die folgenden technischen Anforderungen beachtet werden.

WCAG Kontext

Konformitätsstufe AA

Prinzip 1. Wahrnehmbar

Informationen und Steuerelemente müssen in einer technisch darstellbaren Weise wahrnehmbar sein.

Richtlinie 1.4 Unterscheidbar

Mach es einfacher, Inhalt zu sehen und zu hören, die Trennung von Vordergrund und Hintergrund eingeschlossen.

2.1.1 Tastatur: Das Steuerelement mit der Zusatzinformation muss allein mit der Tastatur erreichbar sein.
3.2.1 Bei Fokus: Ein Fokuseffekt führt nicht zu einer Änderung des Kontextes.
2.4.11 Fokus nicht überdeckt (Minimum): Wenn ein Element den Tastaturfokus erhält, muss es zumindest teilweise sichtbar sein.
2.4.12 Fokus nicht überdeckt (Erhöht): Konformitätsstufe AAA; Wenn ein Element den Tastaturfokus erhält, muss es gänzlich sichtbar sein.
2.4.13 Fokus Erscheinungsbild: Konformitätsstufe AAA; Ein Fokusindikator muss ausreichend Größe und Kontrast aufweisen.

Erläuterungen zum Kontext

Das Kriterium wurde in den WCAG 2.1 neu eingeführt. Die WAI reagiert darauf, dass Tooltips seit 2008 verstärkt in Mode kamen.

Strukturierende Übersetzung des Erfolgskriteriums

Für zusätzlichen Inhalt, der durch Überstreichen mit dem Zeiger oder dem Tastaturfokus angezeigt und entfernt wird, gilt:

Entfernbar

Ein Mechanismus zum Entfernen des zusätzlichen Inhalts steht zur Verfügung, ohne dass der Zeiger bewegt oder der Fokus versetzt werden muss.

Ausnahmen:

Die Zusatzinformation weist auf einen Eingabefehler hin.
Die Zusatzinformation überlagert oder ersetzt keinen anderen Inhalt.

Überstreichbar

Der durch Überstreichen mit dem Zeiger hinzugefügte Inhalt bleibt angezeigt, wenn der Zeiger auf den hinzugefügten Inhalt weiterbewegt wird.

Verbleibend

Der zusätzliche Inhalt bleibt sichtbar, außer:

Der durch Zeiger oder Fokus ausgelöste Mechanismus wurde entfernt.
Nutzer*innen entfernen die Zusatzinformationen.
Der zusätzliche Inhalt ist nicht mehr gültig.

Ausnahme

Die sichtbare Darstellung wird dem Darstellungsprogramm überlassen und nicht weiter geändert.

Anmerkungen

Ein zusätzlicher Inhalt, dessen Darstellung dem Browser überlassen wird ist beispielsweise ein Tooltip aus dem HTML title-Attribut.
Beispiele für zusätzliche Inhalte, die von diesem Erfolgskriterium berührt werden, sind
- programmierte Tooltips,
- Untermenüs und
- nicht-modale Popups,
die beim Überstreichen oder Fokus erscheinen.

Englischsprachiger Originaltext des Erfolgskriteriums

Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:

Dismissible

A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content;

Hoverable

If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;

Persistent

The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.

Exception: The visual presentation of the additional content is controlled by the user agent and is not modified by the author.

Examples of additional content controlled by the user agent include browser tooltips created through use of the HTML title attribute.

Custom tooltips, sub-menus, and other nonmodal popups that display on hover and focus are examples of additional content covered by this criterion.

WCAG | Success Criterion 1.4.13 Content on Hover or Focus

Anmerkungen zur Übersetzung

Die einleitende Aussage wurde umgeformt und gestrafft.
Der Verweis auf Ausnahmen ist im Original nicht in einem eigenen Absatz.
Bedingungen wurden in Listen zusammengefasst.

Zum raschen Verständnis

Das Erfolgskriterium befasst sich mit der technischen Realisierung von Tooltips und verschachtelten Untermenüs für sehende Menschen.

Technische Anforderungen verstehen

Ein Tooltip überlagert vielfach andere Inhalte einer Webseite. Wird die Zusatzinformation unerwartet oder unerwünscht mit der Maus, am Touch Screen oder dem Tastaturfokus ausgelöst, muss sie in der Regel auch wieder entfernt werden können.
Ein typischer Mechanismus zum Entfernen des Tooltips ist das Drücken der Escape-Taste.
Der Tooltip darf nur in Ausnahmefällen von selbst wieder verschwinden. Ich muss selbst über die Relevanz der Darstellung der Zusatzinformation entscheiden können.
Insbesondere eine inhaltlich unbegründete Ablaufzeit stellt einen Störfaktor dar.
Der Tooltip darf nicht nur beim Überstreichen des auslösenden Steuerelements sichtbar sein.
Bei Verwendung einer Vergrößerungssoftware passt ein Tooltip unter Umständen nicht in den vergrößerten Ausschnitt. Wenn der Tooltip durch Überstreichen mit der Maus eingeblendet werden kann, darf er bei einer weiteren Mausbewegung nicht gleich wieder verschwinden. Das Zoomfenster kann mit der Maus auf diese Weise über den Tooltip bewegt werden.
Vergrößerte Mauszeiger aus Systemeinstellungen oder assistierenden Technologien können auf diese Weise auch von Text wegbewegt werden, den sie möglicherweise überdecken.

Ausnahmebestimmungen verstehen

Für Fehlermeldungen muss kein Mechanismus zum Ausblenden verfügbar sein. Ein solcher Mechanismus könnte sogar schaden, wenn versehentlich die Zusatzinformation zum Verschwinden gebracht wurde.
Werden durch den Tooltip keine anderen Inhalte überblenden, schadet die Zusatzinformation kaum. Ein Mechanismus zum Ausblenden ist daher nicht nötig.
Dies gilt natürlich insbesondere bei überblendeten rein dekorativen oder leeren Flächen.
Wenn die Zusatzinformation nicht mehr gültig ist, kann sie automatisch entfernt werden. In bestimmten Fällen muss die Zusatzinformation sogar aktualisiert oder entfernt werden.
Das title-Attribut aus HTML wird von diesem Erfolgskriterium ausgenommen, solange die Darstellung der enthaltenen Information allein dem Browser überlassen wird. Allerdings wirft dieses Attribut massive Probleme bei der reinen Tastaturbedienung auf und sollte daher nur in begründeten Ausnahmefällen für Zusatzinformationen verwendet werden.

Ein Einsprunglink, das erst sichtbar ist, wenn es den Tastaturfokus erhält, fällt nicht unter dieses Erfolgskriterium. Es enthält keine sichtbare Komponente, die den Mechanismus auslöst.

Zielgruppen

Menschen, die mit einer Vergrößerungssoftware arbeiten. Der zusätzliche Inhalt bleibt verfügbar, wenn das Zoomfenster mit der Maus über den Tooltip bewegt wird.
Menschen mit beeinträchtigtem Lesevermögen. Der zusätzliche Inhalt wird nicht vorzeitig ausgeblendet. .
Menschen, die Funktionalitäten von Screen Readern verwenden, um den Inhalt unter der Maus vorlesen zu lassen. Sie können die Maus vom auslösenden Steuerelement auf den Tooltip verschieben.

Tipps zum Prüfverfahren

Maschinelle Prüfung

Tools, die explizit zur Prüfung der digitalen Barrierefreiheit dienen, bieten keine Erkenntnisse. Noch gibt es keine künstliche Intelligenz, die Effekte durch Maus oder Tastatur auswerten könnte.

Manuelle Prüfung

Führe folgende Schritte für programmierte Tooltips, Untermenüs und nicht-modale Popups aus:

Prüfe, ob der eingeblendete Inhalt erscheint, wenn sich die Maus über der Komponente befindet.
Prüfe, ob der eingeblendete Inhalt erscheint, wenn sich der Tastaturfokus auf der Komponente befindet. (Drücken der Tabulator-Taste)
Prüfe, ob der eingeblendete Inhalt sichtbar bleibt, wenn die Maus über den Inhalt bewegt wird.
Prüfe, ob der eingeblendete Inhalt nach einer bestimmten Zeit von selbst verschwindet.

Vergleiche deine Beobachtungen mit den Ausnahmebestimmungen.

Prüfung durch betroffene Menschen (Peer Evaluation)

Die Prüfung erfordert von der Testperson:

Ein ausreichendes Sehvermögen zum Erkennen des eingeblendeten Inhalts und der verlangten Mechanismen.
Eine ausreichende Feinmotorik zum Bewegen der Maus.