neue SVG Spritemap

[Gunnar Bittersmann]

@@marctrix

erlaubt die use-Variante eigentlich das title-Element

Ja. Im Prizip schon.

<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“ als Tooltip an; beim gelben „link title“ und beim grünen gewinnt „symbol title“.

Firefox zeigt beim roten Licht keinen Tooltip an, beim gelben „link title“ und beim grünen dann natürlich auch „link title“.

Safari zeigt keine Lichter‽ WTF‽

Zum Ausprobieren: Codepen

(kann für Screenreader-Ausgabe genutzt werden).

Mag da mal jemand in Screenreadern testen, ob die titles vorgelesen werden? Inbesondere das aus dem symbol-Element, welches nicht als Tooltip angezeigt wird?

LLAP 🖖