Hiding inline SVG icons from screen readers

accessibilit-a11y

Roger Johansson:

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.

Like so:

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

Hiding inline SVG icons from screen readers →

Elsewhere , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *