(as a reply to: https://css-tricks.com/svg-use-with-external-reference-take-2/)
While I love SVG (sprites) there are a lot of issues to take into account.
UPDATE: you should take a look at https://dl.dropboxusercontent.com/u/145744/accessible-svg-icon/test.html which seems a simpler and more robust approach
Another thing: since people copy-paste our code examples it would be great if we could advocate the most robust and accessible markup IMO. I am no a11y expert, but in my understanding we could/should take some extra steps to make out SVG sprite icons more accessible.
Below my current thinking, I would love an a11y expert's advice on this!
First: make a distinction between 'presentational' and 'content' icons. Just as we would with img
and their alt
attributes.
For all SVG Icon sprites (in sprite.svg
):
- Add a
title
element child to the sprite'ssymbol
- Add a
desc
element child to the sprite'ssymbol
<symbol id="left-arrow">
<title>Back</title>
<desc>An arrow pointing left</desc>
<path etc.../>
</symbol>
Now, for use
ing those symbols as purely presentational icons:
- Use
role="presentation"
on the SVG
<svg role="presentation">
<use xlink:href="sprite.svg#left-arrow"/>
</svg>
That's it. But for SVG icons as 'content' we should do more:
- Add
role="img"
- Add a
title
attribute - Add a
title
element with uniqueid
- Add
aria-labelledby="title-id"
<svg role="img" title="Back" aria-labelledby="title-back1">
<title id="title-back1">Back</title>
<use xlink:href="sprite.svg#left-arrow"/>
</svg>
This ensures the best accessibility AFAIK. Again: I am no a11y expert, so please correct me when I'm mistaken.
Thoughts?
- Github: @davidhund
- Twitter: @valuedstandards
It would reduce the filesize a bit, yes. On the accessibility side: they don't hurt, but their usefulness is limited because support is partial and there are authoring difficulties (irrelevant titles, titles that come from the original filename, titles are probably not localized).
Many posts on SVG sprites say "use
<title>
for accessibility", which turns out to be harmful because that's a very partial solution, and authors will not explore other, better solutions. We probably need to change that.So I'm torn on
<title>
in<symbol>
s:Personally I don't use or output
<title>
s in my SVG sprites, and rely on accessible information in the HTML document itself. If more screen reader testing shows it works, I would recommend that.