WCAG 1.4.13 Inhalt bei Hover oder Fokus

Das Erfolgskriterium 1.4.13 hilft Menschen, die stark vergrößern, eine Bildschirmlupe nutzen, ein Zittern haben oder die Tastatur verwenden. Pop-ups, die sich bei Hover oder Fokus öffnen, können verdecken, was sie gerade lesen, oder verschwinden, bevor sie die Maus dorthin bewegen können. In der deutschen Übersetzung der WCAG 2.1 heißt es „Inhalt bei Überfahren mit dem Zeiger oder Tastaturfokus“. Es kam mit WCAG 2.1 hinzu, gehört zur Konformitätsstufe AA und ist Teil von EN 301 549 (Abschnitt 9.1.4.13). Das BFSG verweist über die harmonisierte Norm EN 301 549 auf diese Anforderungen.

Was das Erfolgskriterium verlangt

Wenn Hover mit dem Zeiger oder Tastaturfokus zusätzliche Inhalte erscheinen und wieder verschwinden lässt (eigene Tooltips, Untermenüs, Mega-Menüs, Vorschau-Pop-ups), müssen alle drei Bedingungen erfüllt sein:

• Schließbar: Es gibt eine Möglichkeit, den Inhalt zu schließen, ohne Zeiger oder Fokus zu bewegen, meist die Escape-Taste — es sei denn, der Inhalt zeigt einen Eingabefehler an oder verdeckt bzw. ersetzt keine anderen Inhalte;
• Überfahrbar: Kann Hover den Inhalt auslösen, lässt sich der Zeiger über den zusätzlichen Inhalt bewegen, ohne dass er verschwindet;
• Dauerhaft: Er bleibt sichtbar, bis der Auslöser entfällt, der Nutzer ihn schließt oder seine Information nicht mehr gültig ist.

Ausnahme: Inhalte, deren visuelle Darstellung vom Browser gesteuert und vom Autor nicht verändert wird, etwa Tooltips des title-Attributs.

Nicht erfasst: modale Dialoge (sie müssen den Fokus übernehmen) und Elemente, die selbst bei Fokus eingeblendet werden, etwa Sprunglinks.

Typische Fehler in Onlineshops

• ein Mega-Menü, das sich schließt, wenn die Maus eine kleine Lücke zwischen Menüpunkt und Panel überquert;
• ein Menü oder eine Mini-Warenkorb-Vorschau, die sich bei Hover öffnet und sich nicht mit Escape schließen lässt, während sie die Seite verdeckt;
• ein Tooltip mit Größen- oder Lieferinformationen, der nach einigen Sekunden verschwindet;
• ein Produktbild-Zoom bei Hover, der die Produktdetails verdeckt und sich nicht schließen lässt;
• ein Hilfe-Pop-up, das sich bei Fokus öffnet, das nächste Formularfeld verdeckt und sich erst schließt, wenn der Fokus weiterwandert.

So prüfen Sie es

Automatisch: Keine automatische Regel unseres Checkers ist diesem Kriterium zugeordnet. Für den Test muss man mit der Maus darüberfahren, sie bewegen und Tasten drücken und dabei beobachten, was passiert. Hier ist eine manuelle Prüfung nötig.

Manuell: Für jedes Element, das bei Hover oder Fokus zusätzliche Inhalte zeigt: (1) Fahren Sie mit der Maus darüber und bewegen Sie sie dann auf das Pop-up — es muss bleiben; (2) drücken Sie bei geöffnetem Pop-up Escape, ohne Maus oder Fokus zu bewegen — es sollte sich schließen; (3) warten Sie — es darf nicht nach Zeitablauf verschwinden; (4) wiederholen Sie das mit der Tastatur per Tab. Tun Sie das auch bei 200 % Zoom.

So beheben Sie es

• Schließen Sie Hover- und Fokus-Pop-ups mit Escape.
• Lassen Sie Auslöser und Pop-up aneinandergrenzen oder fügen Sie vor dem Schließen eine kleine Verzögerung ein, damit der Zeiger hinüberwandern kann.
• Entfernen Sie Timer, die Tooltips automatisch ausblenden.
• Öffnen Sie denselben Inhalt bei Tastaturfokus oder für Touch-Nutzer per Klick.
• Bevorzugen Sie für große Menüs und Mini-Warenkörbe Buttons, die per Klick aufklappen.

Verwandte Kriterien

• 1.4.10 Umfluss (Reflow) — Inhalte bei hohem Zoom.
• 1.4.11 Nicht-Text-Kontrast — sichtbare Fokusindikatoren und Icons.
• WCAG-2.2-Checkliste — einschließlich 2.4.11 Fokus nicht verdeckt und 3.2.1 Bei Fokus.

Häufige Fragen

Was bedeuten schließbar, überfahrbar und dauerhaft?

Schließbar: Der Nutzer kann das Pop-up schließen, ohne Maus oder Fokus zu bewegen, meist mit Escape. Überfahrbar: Die Maus kann auf das Pop-up bewegt werden, ohne dass es verschwindet. Dauerhaft: Es bleibt offen, bis der Nutzer sich wegbewegt, es schließt oder es nicht mehr gültig ist.

Sind Tooltips aus dem title-Attribut erfasst?

Nein. Inhalte, deren Darstellung vom Browser gesteuert und vom Autor nicht verändert wird, etwa der Tooltip des HTML-Attributs title, sind ausgenommen.

Fallen Mega-Menüs unter 1.4.13?

Ja, wenn sie sich bei Hover oder Fokus öffnen. Untermenüs, eigene Tooltips und andere nicht-modale Pop-ups, die bei Hover oder Fokus erscheinen, sind erfasst.

Kann ein automatisches Tool 1.4.13 testen?

Nein. Man muss mit der Maus darüberfahren, fokussieren, Escape drücken und das Ergebnis beobachten — es ist also eine manuelle Prüfung.