Tooltipps

[xwolfde]

Wir haben eine Anfrage, ob wir nicht Tooltipps ermöglichen.
Die Anfrage bezieht sich zwar nur auf den Kontext eines Formulars, aber ich denke, dass man dieses vielleicht auch an anderen Stellen verwenden könnte.
Im Gegensatz zu dem Plugin in der vorgeschlagenen Umsetzung, sollte der Tooltipp allerdings die dafür vorgesehenen HTML-Elemente nutzen und die Barrierefreiheit achten.

Beispiele zu barrierefreie Tooltipps:

• https://www.barrierefreies-webdesign.de/knowhow/tooltip/
• https://sarahmhigley.com/writing/tooltips-in-wcag-21/
• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role

[xwolfde]

Shortcode könnte dann z.B. so aussehen:

[tooltip symbol="?"]
HTML für den geöffneten Tooltip.
[/tooltip]

Ich bin mir nur unschlüssig in der Frage, ob und wie der Tooltip-Inhalt dann in der Print-Version ausgegeben werden soll.
Ggf. im Media Print per Default aus. Und nur, wenn ein Attribut showonprint="true" gesetzt ist, dann vielleicht als Fußnote am Ende des Dokuments anzeigen. (Dann muss aber wiederum das Symbol zur Zahl werden).

[Albager]

Hallo, danke für's Erstellen des Issues. Halte es auch für eine gute Idee, eine allgemeine Tooltipp-Funktion zu ermöglichen. Frage mich nur, wie das dann wieder mit Contact Form 7 und dem Conditional Fields Plugin für CF7 zusammenspielen soll (was das eigentliche Anliegen war), denn unsere FAU-Theme-Shortcodes funktionieren innerhalb der CF7-Kontaktformulare ja gar nicht - oder etwa doch?

[cassandre]

Ich glaube, so einfach ist das nicht. Wenn ich die oben verlinkten Quellen richtig interpretiere, soll ein Tooltipp kein eigenständiges Element sein, sondern sich immer auf ein interaktives Element beziehen, das es erklärt/beschreibt und auf das es sich mit aria-describedby oder aria-labelledby bezieht.

Tooltips should directly describe the UI control that triggers them (i.e. do not create a control purely to trigger a tooltip)
Use aria-describedby or aria-labelledby to associate the UI control with the tooltip. Avoid aria-haspopup and aria-live

Von daher wäre es eher sinnvoll, bestehende interaktive Elemente (Buttons, Inputs...) um ein Tooltip-Attribut zu erweitern.

[xwolfde]

Das interaktive Element hier ist das Symbol.
In meinen Beispiel das Fragezeichen.

[xwolfde]

Durch neue Techniken gibt es hier einen neuen Ansatz:

https://html.spec.whatwg.org/multipage/popover.html#the-popover-attribute
https://hidde.blog/popover-accessibility/