Schritt für Schritt zu barrierefreien Tooltips

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:

• 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.

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
Fatal error: Uncaught Error: Call to undefined function mysql_query() in /home/lfqdu6ah4gh6/migrated_webspace/www/bfw/lib/php/content_func.php:124 Stack trace: #0 /home/lfqdu6ah4gh6/migrated_webspace/www/bfw/lib/php/content_func.php(112): setScLinkToDb() #1 /home/lfqdu6ah4gh6/migrated_webspace/www/bfw/knowhow/tooltip/light-dismiss.php(25): sclink() #2 {main} thrown in /home/lfqdu6ah4gh6/migrated_webspace/www/bfw/lib/php/content_func.php on line 124