Hiding inline SVG icons from screen readers

Icon fonts are finally being phased out in favour of a technology that’s more fit for purpose: SVG. There are many tutorials and guides that describe different ways in which you can use SVG icons, which is great. I do however see an issue related to accessibility pop up now and again, so I’d like to share a little tip about that.

Many, probably the majority, of articles explaining how to use inline SVG for icons describe multiple ways of ensuring that your SVG graphics have a text alternative. That can be appropriate, but most of the time, at least in my experience, you just want an icon as an added visual cue alongside some text. Just like adding an image via the background-image CSS property. And icons of that kind should not have any text alternative since for a screen reader user that will just duplicate the information already available in plain text.

If you use background-image to insert an SVG icon, there is no problem. Screen readers will treat the SVG like any other background image and ignore it. Likewise if you use an img element with an empty alt attribute (alt=""), the SVG will be ignored.

The problem is related to using inline SVG, i.e. the svg element. SVG files may contain a title element which may or may not get announced by screen readers (depending on SVG embedding technique, browser name and version, and screen reader name and version). So far I haven’t run into a situation where I want any other behaviour than screen readers completely ignoring icons (since they are all accompanied by text).

After a bit of testing, I found that simply adding aria-hidden="true" to the svg element solves the problem. So, this is the svg markup I use (haha) for icons contained in an SVG sprite file:

<svg aria-hidden="true">
	<use xlink:href="icons.svg#icon" />
</svg>

The end result to the user is essentially the same as this:

<img src="icon.svg" alt="" />

But you get the benefits of being able to affect icons via CSS and having the icons all contained in a single file to reduce HTTP requests (which HTTP/2 will eventually make less relevant but for now it’s still relevant for many sites). Don’t want to use a sprite? Just replace the use element with the appropriate SVG code.

Note that aria-hidden should only be used when you really want to hide the svg element completely from screen readers. If you use SVG to embed an image that is not just decorative, you need to make sure there is a text alternative. Check out Tips for Creating Accessible SVG and Accessible SVGs for more information on how to do that.

Posted on September 30, 2016 in Accessibility

• Previous post: Linting CSS with stylelint