1.4.13 Eingeblendete Inhalte bei Hover oder Fokus

Was bedeutet das?

Tooltips, Aufklappmenüs und Vorschaukarten, die beim Überfahren mit der Maus oder beim Fokussieren erscheinen, müssen drei Bedingungen erfüllen. Schließbar: Man kann sie ohne Bewegen von Maus oder Fokus ausblenden, meist mit der Esc-Taste; das ist nicht nötig, wenn sie einen Eingabefehler melden oder nichts anderes verdecken. Erreichbar: Man kann den Mauszeiger auf den eingeblendeten Inhalt bewegen, ohne dass er verschwindet. Dauerhaft: Er bleibt sichtbar, bis Maus oder Fokus woanders hingehen, man ihn schließt oder seine Information nicht mehr gilt.

Das betrifft Inhalte, die Sie selbst programmieren. Ausgenommen ist, was der Browser allein steuert, etwa der kleine Hinweis des title-Attributs. Wer stark vergrößert, braucht diese Regeln besonders, weil der Tooltip sonst genau den Bereich verdeckt, den er gerade lesen will.

Wem hilft das?

• Menschen mit Sehbehinderung, die mit Bildschirmlupe arbeiten
• Menschen, die mit der Tastatur navigieren
• Menschen mit motorischen Einschränkungen, die die Maus nicht ruhig halten können
• Menschen mit kognitiven Einschränkungen, die mehr Zeit zum Lesen brauchen

Typische Fehler

• Tooltip verschwindet, sobald man die Maus vom Auslöser auf den Tooltip bewegt
• Menü oder Vorschau lässt sich nicht mit Esc schließen und verdeckt Inhalt
• Hinweis verschwindet nach wenigen Sekunden von selbst
• Tooltip erscheint nur bei Hover, nicht bei Tastaturfokus

So prüfen wir das

• nur Mensch Nur von Hand: Hier lässt sich nichts Sinnvolles messen. Die Prüferin oder der Prüfer testet es direkt.

Prüffrage: Tooltips und Menüs bei Hover/Fokus: per Esc schließbar, mit der Maus erreichbar, bleiben bis zum Schließen.

Entschieden wird jedes Kriterium von einem Menschen. Kein Kriterium gilt automatisch als erfüllt.

So beheben Sie es

.trigger:hover + .tip { display: block; }
.tip { display: none; }

<span class="has-tip">
  <button aria-describedby="tip1">Versandkosten</button>
  <span role="tooltip" id="tip1" class="tip">Ab 50 € versandkostenfrei</span>
</span>
<style>.tip{display:none} .has-tip:is(:hover,:focus-within):not(.closed) .tip{display:block}</style>
<script>
const tips = document.querySelectorAll('.has-tip');
document.addEventListener('keydown', e => { if (e.key === 'Escape') tips.forEach(t => t.classList.add('closed')); });
tips.forEach(t => ['pointerleave', 'focusout'].forEach(ev => t.addEventListener(ev, () => t.classList.remove('closed'))));
</script>

Der Tooltip erscheint bei Hover und Fokus, bleibt offen, solange die Maus auf Auslöser oder Tooltip ist, und schließt mit Esc.

Praxistipps

• Wichtige Informationen gehören nicht in einen Tooltip, sondern sichtbar auf die Seite.

Ratgeber und Muster dazu

• Navigation mit Untermenüs, die nicht nur mit der Maus funktioniertUntermenüs per Button, Escape schließt, normale Links.

Offizielle Quelle

Understanding WCAG 2.2 beim W3C (Englisch): 1.4.13 Content on Hover or Focus