Schritt für Schritt zu barrierefreien Tooltips

Light Dismiss für die Tastatur (3/4)

"Light Dismiss" ist ein Begriff aus dem HTML-Standard. Er bedeutet, dass ein Klick außerhalb eines Popovers dieses schließt. Für Tastaturnutzende entspricht dies dem Drücken der Escape-Taste.

Für ein Tooltip ist es zulässig, den Tooltip auszublenden, wenn der Mauszeiger weder über das auslösende Element noch über den Tooltip schwebt. Der "Light Dismiss" mit einem Klick anderswo auf der Webseite ist hier nicht gemeint und nach Erfolgskriterium 1.4.13 der Web Content Accessibility Guidelines (WCAG) 2.2 nicht gefragt. Vielmehr kann beim Einsatz von Vergrößerungssystemen ein Tooltip bildschirmfüllend sein. Der Tooltip muss unmittelbar nach dem Einblenden ausgeblendet werden können, beispielsweise durch Drücken der Escape-Taste.

Um zu verhindern, dass Tooltips andere Inhalte überlagern, gibt es zwei mögliche Techniken:

• Der Tooltip wird so positioniert, dass er keine anderen Inhalte verdeckt.
• Es wird eine Möglichkeit geschaffen, den Tooltip per Tastatur auszublenden.

Auch wenn ein Tooltip keine anderen Inhalte verdeckt, ist die Berücksichtigung der zweiten Technik wünschenswert. Wenn ein Tooltip eingeblendet wird, kann es beim Einsatz eines Vergrößerungssystems unklar sein, ob andere Inhalte verdeckt werden oder nicht.

Hinweis: Der Tooltip sollte sichtbar bleiben, solange der Mauszeiger über dem auslösenden Element oder dem Tooltip schwebt oder der Fokus auf dem auslösenden Element ist und Nutzende ihn nicht explizit ausgeblendet haben. Lediglich Fehlermeldungen müssen nicht ausgeblendet werden können (z. B. wenn eine Korrekturmaßnahme erforderlich ist).

Für Maus- und Tastaturnutzende soll das Drücken der Escape-Taste zum Ausblenden des eingeblendeten Tooltips führen. Um dies zu erreichen, können wir zu den Beispielen aus Schritt 2 zurückkehren und folgende Event-Handler hinzufügen:

Mit der Möglichkeit, einen Tooltip per Escape-Taste zu schließen, sind die Anforderungen an die Barrierefreiheit erfüllt. Der Tooltip kann aber mit der Popover-API weiter vereinfacht werden. Insbesondere kann damit der Light Dismiss vom Browser übernommen werden.