@@marctrix > erlaubt die use-Variante eigentlich das `title`-Element Ja. Im Prizip schon. ~~~HTML <svg style="display: none"> <symbol id="circle" viewBox="-1 -1 2 2"> <circle r="1"/> </symbol> <symbol id="circle-with-title" viewBox="-1 -1 2 2"> <title>symbol title</title> <circle r="1"/> </symbol> </svg> <a href=""> <svg fill="var(--red, red)"><use href="#circle-with-title"/></svg> </a> <a href="" title="link title"> <svg fill="var(--yellow, yellow)"><use href="#circle"/></svg> </a> <a href="" title="link title"> <svg fill="var(--green, green)"><use href="#circle-with-title"/></svg> </a> ~~~ Chrome zeigt beim roten Licht *„symbol title“*{:@en} als Tooltip an; beim gelben *„link title“*{:@en} und beim grünen gewinnt *„symbol title“*{:@en}. Firefox zeigt beim roten Licht keinen Tooltip an, beim gelben *„link title“*{:@en} und beim grünen dann natürlich auch *„link title“*{:@en}. Safari zeigt keine Lichter‽ WTF‽ Zum Ausprobieren: [Codepen](https://codepen.io/gunnarbittersmann/pen/XPpeJz) > (kann für Screenreader-Ausgabe genutzt werden). Mag da mal jemand in Screenreadern testen, ob die `title`s vorgelesen werden? Inbesondere das aus dem `symbol`-Element, welches nicht als Tooltip angezeigt wird? LLAP 🖖 -- *„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann

@@marctrix > erlaubt die use-Variante eigentlich das `title`-Element Ja. Im Prizip schon. ~~~HTML <svg style="display: none"> <symbol id="circle" viewBox="-1 -1 2 2"> <circle r="1"/> </symbol> <symbol id="circle-with-title" viewBox="-1 -1 2 2"> <title>symbol title</title> <circle r="1"/> </symbol> </svg> <a href=""> <svg fill="var(--red, red)"><use href="#circle-with-title"/></svg> </a> <a href="" title="svg title"> <svg fill="var(--yellow, yellow)"><use href="#circle"/></svg> </a> <a href="" title="svg title"> <svg fill="var(--green, green)"><use href="#circle-with-title"/></svg> </a> ~~~ Chrome zeigt beim roten Licht *„symbol title“*{:@en} als Tooltip an; beim gelben *„svg title“*{:@en} und beim grünen gewinnt *„symbol title“*{:@en}. Firefox zeigt beim roten Licht keinen Tooltip an, beim gelben *„svg title“*{:@en} und beim grünen dann natürlich auch *„svg title“*{:@en}. Safari zeigt keine Lichter‽ WTF‽ Zum Ausprobieren: [Codepen](https://codepen.io/gunnarbittersmann/pen/XPpeJz) > (kann für Screenreader-Ausgabe genutzt werden). Mag da mal jemand in Screenreadern testen, ob die `title`s vorgelesen werden? Inbesondere das aus dem `symbol`-Element, welches nicht als Tooltip angezeigt wird? LLAP 🖖 -- *„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann

@@marctrix > erlaubt die use-Variante eigentlich das `title`-Element Ja. Im Prizip schon. ~~~HTML <svg style="display: none"> <symbol id="circle" viewBox="-1 -1 2 2"> <circle r="1"/> </symbol> <symbol id="circle-with-title" viewBox="-1 -1 2 2"> <title>symbol title</title> <circle r="1"/> </symbol> </svg> <a href=""> <svg fill="var(--red, red)"><use href="#circle-with-title"/></svg> </a> <a href="" title="svg title"> <svg fill="var(--yellow, yellow)"><use href="#circle"/></svg> </a> <a href="" title="svg title"> <svg fill="var(--green, green)"><use href="#circle-with-title"/></svg> </a> ~~~ Chrome zeigt beim roten Licht *symbol title*{:@en} als Tooltip an; beim gelben *svg title*{:@en} und beim grünen gewinnt *symbol title*{:@en}. Firefox zeigt beim roten Licht keine Tooltip, beim gelben *svg title*{:@en} und beim grünen dann natürlcih auch *svg title*{:@en}. Safari zeigt keine Lichter‽ WTF‽ Zum Ausprobieren: [Codepen](https://codepen.io/gunnarbittersmann/pen/XPpeJz) > (kann für Screenreader-Ausgabe genutzt werden). Mag da mal jemand in Screenreadern testen, ob die `title`s vorgelesen werden? Inbesondere das aus dem `symbol`-Element, welches nicht als Tooltip angezeigt wird? LLAP 🖖 -- *„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann