Inhalt bei Hover oder Fokus

Was verlangt dieses Erfolgskriterium?

Wenn zusätzlicher Inhalt — ein Tooltip, ein Popover, ein Untermenü — erscheint, weil eine nutzende Person den Zeiger über ein Element bewegt oder es fokussiert hat, muss dieser Inhalt drei Regeln erfüllen. Schließbar: die Nutzenden können ihn schließen, ohne den Zeiger oder den Fokus zu bewegen (in der Regel über die Escape-Taste). Mit dem Zeiger erreichbar: wenn der Zeiger vom Auslöser in den eingeblendeten Inhalt bewegt wird, bleibt dieser geöffnet. Persistent: der Inhalt läuft nicht nach einem Timeout ab und verschwindet nicht, bis die Nutzenden ihn schließen oder der Auslöser den Fokus verliert.

So wird das Erfolgskriterium erfüllt

• Die Escape-Taste wird so verdrahtet, dass sie jeden Tooltip oder Popover schließt, der bei Hover oder Fokus geöffnet wird.
• Das Tooltip-Element selbst muss mit der Maus erreichbar sein — es darf nicht so positioniert sein, dass beim Bewegen des Zeigers in Richtung Tooltip ein mouseout-Ereignis auf dem Auslöser ausgelöst wird.
• Tooltips werden nicht nach einem Timeout automatisch geschlossen, solange die Nutzenden noch über dem Auslöser verweilen oder diesen fokussiert haben.
• aria-describedby wird eingesetzt, um den Auslöser mit dem Popup zu verknüpfen, damit Screenreader den Inhalt ankündigen.
• Popovers werden mit dem HTML-Attribut popover oder einer geprüften Bibliothek (Popper.js, Floating UI, Radix UI) umgesetzt — beide behandeln diese Regeln korrekt.
• Bei Dropdown-Untermenüs wird ein kleiner Toleranzbereich zwischen dem übergeordneten Menüeintrag und dem Untermenü eingeplant, damit der Zeiger diesen Bereich überqueren kann, ohne das Menü zu schließen.

Häufige Fehler

• CSS-only-:hover-Tooltips mit einem Abstand zwischen Auslöser und Tooltip — der Zeiger bewegt sich in den Abstand, mouseout wird ausgelöst, der Tooltip verschwindet.
• Tooltips, die nach 2 Sekunden automatisch geschlossen werden, auch wenn die Nutzenden noch über dem Auslöser verweilen.
• Kein Escape-Tastatur-Handler — Tastaturnutzende können einen fokusaktivierten Tooltip nicht schließen, ohne das Feld zu verlassen.
• Dropdown-Menüs, die sich schließen, sobald der Zeiger minimal vom übergeordneten Element abweicht, bevor der Kindbereich erreicht wurde.
• Popovers, die bei Fokus ausgelöst werden, den sichtbaren Bereich einnehmen und nicht per Escape ausgeblendet werden können — sie bleiben dauerhaft sichtbar.

Warum das wichtig ist

Dieses Erfolgskriterium wird am häufigsten durch selbst entwickelte Tooltips und CSS-only-Dropdown-Menüs verletzt. Es empfiehlt sich, auf eine Bibliothek umzusteigen, die Schließbarkeit und Erreichbarkeit mit dem Zeiger bereits korrekt implementiert, oder eigenen Code gegen die drei Regeln zu prüfen. Die Korrektur wirkt sich stark aus: Hover-Inhalte sind auf komplexen Benutzeroberflächen allgegenwärtig — eine einzige Korrektur in einer gemeinsam genutzten Komponente beseitigt einen Großteil der Audit-Schulden.