Here’s how I’d handle various common SVG icon scenarios with accessibility in mind.
Just an icon
So this is an icon that’s not within a link or button and has no adjacent text. This might be, for example, an upward-pointing arrow icon in a
<td> in a “league table” where the arrow is intended to indicate a trend such as “The figure has increased” or “Moving up the table”.
The point here is that in this scenario the SVG is content rather than decoration.
Note: Fizz Studio’s article Reliable valid SVG accessibility suggests that the addition of
aria-labelledby pointing to an id for the
<title> (as Léonie originally recommended) is no longer necessary. That’s encouraging, but as it does no harm to keep it I think I’ll continue to include it for the moment.
The same article also offers that maybe we should not use the SVG
<title> element (and use
aria-label to provide an accessible name instead) due to the fact that it leads to a potentially undesirable tooltip, much like the HTML
title attribute does. To be honest I’m OK with this and don’t see it as a problem, and as I mention later have heard probably even more problematic things about
aria-label so will stick with
Button (or link) with icon plus text
This is easy. Hide the icon from Assistive Technology using
aria-hidden to avoid unnecessary repetition and rely on the text as the accessible name for the button or link.
Button (or link) with icon alone
In this case the design spec is for a button with no accompanying text, therefore we must add the accessible name for Assistive Technologies ourselves.
The reason I use text that’s visually-hidden using CSS for the accessible name rather than adding
aria-label on the button or link is because I’ve heard that the former option is more reliable. In greater detail: aria-label is announced inconsistently and not always translated.