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.
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.
- Previous post: Linting CSS with stylelint