statamic / ideas

💡Discussions on ideas and feature requests for Statamic
https://statamic.dev
32 stars 1 forks source link

handle title and desc element with SVG tag #926

Closed jimblue closed 1 year ago

jimblue commented 1 year ago

Actually there is no solution to add a <title> and a <desc> to a svg with the {{ svg }} tag while thoses elements are very important for a11y.

So it could be nice if the following markup:

{{ svg src="mybrandlogo" class="brand-logo" title="My Brand logo" desc="Uppercase text reading My Brand"

would output:

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="title desc" viewBox="0 0 100 20">
  <title id="title">My Brand</title>
  <desc id="desc">Uppercase text reading My Brand</desc>
  <path d="..................." />
</svg>

Some doc about SVG and a11y: https://www.tpgi.com/using-aria-enhance-svg-accessibility/