Dieses WCAG-Kriterium verlangt, dass alle Inhalte, die durch Maus‑Hover oder Tastatur‑Fokus eingeblendet werden (z. B. Tooltips, Pop‑ups, Untermenüs), barrierefrei gestaltet sind: Nutzer müssen den Inhalt wahrnehmen und anzeigen lassen können, ohne ihn ungewollt zu verlieren. Dafür müssen drei Bedingungen erfüllt sein:
- Der zusätzliche Inhalt ist schließbar – kann also z. B. mit ESC oder einem Schließen-Mechanismus geschlossen werden, ohne Maus oder Fokus zu wechseln.
- Der zusätzliche Inhalt ist ‚hoverbar‘, also bleibt sichtbar, wenn der Mauszeiger darauf bewegt wird.
- Der zusätzliche Inhalt ist persistent und verschwindet erst, wenn der Trigger (Hover/Fokus) wegfällt, der Nutzer ihn explizit schließt oder die Informationen nicht mehr gültig sind.
Tipps und Infos zur Umsetzung des WCAG-Kriteriums 1.4.13
Hier kommen von uns noch ein paar Tipps und Infos zur Umsetzung des WCAG-Kriteriums 1.4.13:
- Mechanismus zum Schließen bereitstellen: Nutze ESC‑Tastaturkürzel oder ein gut erreichbares „X“, damit Inhalte unabhängig von Mausbewegungen verworfen werden können.
- Hover-Interaktion ermöglichen: Sorge dafür, dass beim Überfahren des eingeblendeten Inhalts der Tooltip/Popup aktiv bleibt – das erfordert z. B. vergrößerte Hover‑Bereiche via CSS oder JS.
- Persistente Anzeige garantieren: Blende Inhalte nicht automatisch nach kurzer Zeit aus. Sie sollten so lange sichtbar bleiben, wie Fokus oder Maus darüber ist oder bis der Nutzer sie schließt.
- Tastaturzugänglichkeit sicherstellen: Zusätzliche Inhalte müssen über die Tastatur ausgelöst und bedient werden können. Beispiel: aria-describedby + role=“tooltip“.
- Hinweis: Es ist in der Regel besser, Inhalte direkt auf der Seite darstellen, als sie nur durch Hover‑Mechanismen zugänglich zu machen.
Bei Fragen beraten wir dich gerne. Mehr Infos zu diesem Kriterium findest du auch auf der folgenden englischen WAI-Seite zum WCAG-Kriterium 1.4.13 Inhalt beim Überfahren mit dem Zeiger oder Tastaturfokus.