Gehirngerecht Digital

Die WCAG-Kriterien

WCAG 1.4.13: Eingeblendete Inhalte auf Hover und Fokus

Zurück zu allen WCAG-Kriterien

ÜBERBLICK

Umsetzbarkeit:

  • Komplexität:Kompliziert
  • Dauer:Kann dauern

Wichtig für Rolle:

Entwicklung

Worum gehts?

Wenn beim Hovern mit der Maus oder beim Erhalten des Tastaturfokus Elemente eingeblendet werden, müssen diese alle drei folgenden Anforderungen erfüllen:

  1. Sie müssen zu schließen sein: Der Inhalt muss geschlossen werden können, ohne die Maus vom Auslöser wegzubewegen. Entweder durch Drücken von Esc, eines anderen dokumentierten Tastaturkürzels oder durch Aktivieren des Auslösers.
  2. Sie müssen per Hover bedienbar bleiben. Man kann die Maus über den Inhalt bewegen, ohne dass der Inhalt verschwindet.
  3. Sie dürfen sich nicht von alleine schließen: Der Inhalt muss sichtbar bleiben und darf sich nicht automatisch nach einer gewissen Zeit schließen (wenn ich nicht die Maus oder den Fokus wegbewege).
Illustration von einer Website mit Navigation. Ein Menü-Punkt hat ein Untermenü, welches ausgeklappt ist. Ein Mauszeiger hovert über den obersten Menü-Punkt.

Umsetzung

Mindestens eine der folgenden Möglichkeiten muss umgesetzt werden, um das Kriterium zu erfüllen. Nähere Informationen dazu findest du in den jeweils verlinkten WCAG-Techniken.

  • Illustration von einer Website mit Navigation. Ein Menü-Punkt hat ein Untermenü, welches ausgeklappt ist. Ein Mauszeiger hovert über den obersten Menü-Punkt.

    Mache eingeblendete Inhalte schließbar, hoverbar und ohne Zeitbegrenzung

    Achte darauf, dass eingeblendete Elemente die drei oben genannten Anforderungen erfüllen. Am Beispiel eines Untermenüs, das bei Hover eingeblendet wird, könnte das so aussehen: 

    1. Das Untermenü kann geschlossen werden, ohne die Maus wegzubewegen. Das kann über einen Klick auf das Übermenü passieren, über die ESC-Taste oder eine andere erklärte Tastenkombination. Das ist allerdings nur notwendig, wenn das Untermenü keine anderen wichtigen Inhalte überlagert (Texte, das Übermenü etc.).
    2. Man kann den Mauszeiger über das eingeblendete Untermenü bewegen, ohne dass es sich schließt.
    3. Das Untermenü schließt sich nicht von selbst, solange die Maus sich darauf befindet.

    Das Gleiche gilt auch, wenn das Untermenü bei Fokus oder Aktivierung durch die Tastatur eingeblendet worden ist.

    WCAG-Technik(en) in Englisch:

    DAs Accessbility-Center

    Teste selbstständig auf digitale Barrierefreiheit! 

    Mit unserem manuellen Test-Tool prüfst du deine Website selbstständig, schnell und effizient auf digitale Barrierefreiheit!

    • Alle Prüfschritte leicht erklärt
    • Teile und exportiere Prüfberichte
    • Teste direkt auf der Live-Webseite!
    Zum Accessibility-Center