Making screen-readers read out <text> items in SVG graphics?

user_12710093 0
Viewed 145

I've searched all over the place and not have any success with this. I'm making SVGs like the following one in order to make them scalable, and also help people who are dyslexic so they can highlight the text and use plugins like Read Out Loud:

https://www.ole.bris.ac.uk/bbcswebdav/institution/TEL/TEL%20guides/Published%20TEL%20guides/Replay/record-now-instructions-web.svg

But I've not been able to get my copy of NVDA to read out the tab-indexed fields as I tab through them. I've tried fields and aria-label on various things...

Is there something simple I can change so NVDA (and similar screen readers) will read out the text as I tab through (NVDA does this on HTML pages). Or should I just put the full description of all the text in my description at the top?

nvda wai-aria accessibility svg
2 Answers

I noticed you have role="img" in your svg root. That's borking everything, since it tells the accessibility API that it is just a single element, whose accessible name is always aria-labelledby="svgTitle svgDesc"

Try changing that to role="graphics-document" (or perhaps role="application" if you want fancier interactions) and I think you'll have a whole lot more luck.

user_4694910

The other option is to remove the role attribute from the <svg> element. It sounds counterintuative, but it should make any <text> elements accessible.

For an example, see tip 5 in this SitePoint article, which has great background and other helpful tips on making SVG more accessible in different use cases: Tips for Creating Accessible SVG

From the above article:

<svg version="1.1" width="300" height="200" aria-labelledby="title desc">
<title id="title">Green rectangle</title>
<desc id="desc">A light green rectangle with rounded corners and a dark green border.</desc>
<rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" />
<text x="35" y="30" font-size="1em" text-anchor="middle" fill="#000000">Website</text>
</svg>
user_2885220
Related