Do screenreaders ever access the content of an SVG?

Question

The code I'm working on needs to pass the tests from Tenon.io, and it's flagging issues that occur within SVGs, specifically Test ID 75 (This 'id' is being used more than once). This is failing because the SVGs have identical ids for similar elements because they were generated by the same program (Illustrator I believe) and more than one appears on a page. I would think that any content inside an SVG would be irrelevant and shouldn't be flagged or even traversed by either a screenreader or Tenon.io's crawler.

I've tested the page where this issue appears in VoiceOver and it is ignored. Do other screenreaders do the same? Is there risk of any screenreader traversing an SVG DOM?

Answer 1

Yes, Screen readers can read an SVG as long as that screen reader has been coded to read a SVG.

SVGs have a number of accessibility tags which can be used and read by screen readers to describe what the SVG is representing or is meant to show.

The main accessibility tags are

• <title> which is used to title an SVG
• <desc> which is used to give a description of what the SVG is showing
• <text> which is text already on an SVG which the screen reader can access instead of using vectors to simulate characters

There are also normal properties you can use which screen readers use to help identify an object such as role to specify what the SVG is used for (like an img).

An alternative is just to create a fallback which is accessible to all screen readers as some do better than others at reading certain things.

Here are some good docs you can read up on which may be able to help:

• SitePoint's SVG Accessibility Guide
• CSS-Tricks SVG Accessibility Guide
• W3C Doc on SVG Accessibility API Mappings
• W3C Accessibility Features of SVG