Adding <title> slot for accessibility with screen readers

[ryanrapini]

For my own purposes, I wanted to support screen readers. I'm not 100% confident on the best way to do so, but this seemed to be the most simple implementation that will allow me to inject something like: <title>Screen Reader Text</title> into my SVGs.

Usage example:

<PieChart fill="red">
This is some alt text for screen readers
</PieChart>

Result:

<svg fill="red ... >
   <title>This is some alt text for screen readers</title>
   ... svg contents ...
</svg>

It might make more sense to implement a <slot="title"> and <slot="desc"> for the purposes of your library but I only needed <title>

You also might look into implementing aria-labelledby= and generating a GUID but this was way outside the scope of my needs.

For reference, https://www.deque.com/blog/creating-accessible-svgs/ discusses the various options for accessibility with <svg> icons

[MKRhere]

Wouldn't this create an empty <title></title> in the SVG if none was passed?

I feel a better way would be to have a single <slot /> and you can pass a <title>, or svelte:fragment with <title> and <desc> as you please. The current PR doesn't allow you to set any attributes on the title element if desired either.

Would you be able to modify the PR to just add a single slot without the surrounding title?

[ryanrapini]

I agree. I have added a second commit which instead creates a simple slot.

[MKRhere]

lgtm, thanks!