WCAG 1.4.13: Inhalt bei Hover oder Fokus

Inhalte, die bei Hover oder Tastaturfokus zusätzlich erscheinen – Tooltips, Untermenüs, Vorschau-Karten –, müssen drei Regeln erfüllen: schließbar (dismissible), überfahrbar (hoverable) und beständig (persistent). (Englisch: Content on Hover or Focus.)

Was verlangt das Kriterium?

1. Schließbar: Der eingeblendete Inhalt lässt sich ohne Bewegen von Zeiger oder Fokus wegdrücken – üblicherweise mit Esc. Grund: Er verdeckt sonst genau das, was eine Vergrößerungs-Nutzerin gerade lesen wollte.
2. Überfahrbar: Erscheint der Inhalt bei Hover, darf er nicht verschwinden, wenn der Zeiger vom Auslöser auf den Inhalt wandert – sonst kann man ihn bei starker Vergrößerung nie erreichen (und nichts darin markieren oder klicken).
3. Beständig: Der Inhalt bleibt sichtbar, bis der Nutzer Hover/Fokus beendet, ihn aktiv schließt oder die Information hinfällig wird – kein Timeout, das den Tooltip nach zwei Sekunden wieder einzieht.

Ausgenommen sind Einblendungen, die der Browser selbst steuert (etwa das native title-Attribut – das aus anderen Gründen ohnehin keine gute Tooltip-Lösung ist).

Wen betrifft es besonders?

Vergrößerungs-Nutzer (Tooltip verdeckt das halbe Sichtfeld und flieht vor dem Zeiger), Menschen mit Tremor (unruhiger Zeiger lässt Inhalte flackern) und Menschen, die länger zum Lesen brauchen.

Richtig & falsch im Code

/* Falsch: Lücke zwischen Trigger und Tooltip –
   beim Überfahren verschwindet der Inhalt */
.tooltip { position: absolute; top: calc(100% + 12px); }

/* Richtig: lückenlos anbinden (oder die Lücke überbrücken) */
.tooltip { position: absolute; top: 100%; padding-top: 12px; }

// Richtig: Esc schließt, ohne dass sich der Fokus bewegt
trigger.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') hideTooltip();
});

Das vollständige Muster (inklusive Fokus-Verhalten und Popover-API) steht unter Tooltips & Popover-API; für Navigations-Flyouts gilt dasselbe – siehe Mega-Menüs.

So testest du es

1. Jeden Hover-/Fokus-Inhalt auslösen und Esc drücken – verschwindet er?
2. Mit dem Zeiger vom Auslöser auf den Inhalt fahren – bleibt er stehen?
3. Warten – verschwindet er von selbst? (Das wäre der Beständigkeits-Verstoß.)
4. Mit Tastatur fokussieren: erscheint derselbe Inhalt auch ohne Maus (2.1.1 lässt grüßen)?

Verwandte Themen

• Tooltips & Popover-API – das Umsetzungs-Muster
• Menüs & Dropdowns – Flyouts nach denselben Regeln
• 2.4.11 Fokus nicht verdeckt – die umgekehrte Verdeckungs-Frage