(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
@davidhund, if I'm not mistaken:
aria-hidden="true"
will prompt AT to ignore the SVG element and its descendants.role="presentation"
basically tells AT that the SVG element should be seen as a<span>
. There are special cases where it's meant to neutralize the native semantics of an element and some of its descendants, for instance if you use it on a<ul>
or<table>
it might neutralize the semantics of the<li>
s and<td>
s below it, but I don't think we can rely on that for a SVG element.Based on that, I figured that
role="presentation"
was not fail-safe if I wanted AT to basically ignore the SVG icon and use the contextual text (plain text oraria-label
on parent) only.We rarely have that use case, because our icons are almost always in buttons and links, and when they're not it's often a coding mistake (there should be a A or BUTTON). Also if they are not in a button or link, they might be a decoration that goes with a label (for instance an icon that goes alongside an error or warning message).
When we do want to give alternative text for a SVG graphic outside of a link or button:
<img src="illustration.svg" alt="Relevant alt text">
.<svg>
element with a<title>
element, and we will probably avoid putting that content image in our SVG sprite(s).