Schritt für Schritt zu barrierefreien Tooltips

veröffentlicht in 2015

zuletzt bearbeitet in

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

"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 gefragt und in der Situation nicht hilfreich. 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. Das einfache Vor- und Zurückbewegen des Fokus reicht nicht aus.

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

Auch wenn ein Tooltip keine anderen Inhalte verdeckt, ist die Berücksichtigung der zweiten Technik wünschenswert.

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 führt das Drücken der Escape-Taste zum Ausblenden des eingeblendeten Tooltips. Um dies zu erreichen, können wir zu den Beispielen zurückkehren und folgende Event-Handler hinzufügen:

Mit der Umsetzung dieses dritten Schrittes sind die Mindestanforderungen an barrierefreie Tooltips nach Erfolgskriterium 1.4.13 der Web Content Accessibility Guidelines (WCAG) 2.2 erfüllt. Das schließt nicht andere Kriterien der Barrierefreiheit ein, etwa ausreichende Kontrastverhältnisse oder anpassbare Schriftgrößen. Außerdem dürfen Tooltips nur redundante Informationen enthalten, um HTML-konform zu sein.