CODEWITHSUNDEEP
xmlsvgtextaccessibilitywai-aria
jdb2
jdb2

Reputation: 121

How do I go about making an SVG image accessible to screen readers by using the aria-* attributes?

I've been creating diagrams using Inkscape and Draw.io and exporting them to SVG files. I'd like to make the text in the SVG files selectable on a web page, or, failing that, at least accessible to screen readers. The problem I'm having is that using the aria-* attributes seem to do nothing for the screen reader ( I've been testing it with JAWS ). I need some help as I don't really know what I'm doing with respect to the aria-* accessibility attributes and I haven't been able to find a concise explanation -- just the w3c spec.

I've tried grouping elements and giving them aria-label attributes but they're not picked up by the screen reader.

<g aria-label="R1 register"> ... <text aria-label="Nibble zero">0</text><text aria-label="Nibble one">1</text> ... </g>

The expected results would be the screen reader reading the aria-label attributes, but, the last time I tested it, JAWS didn't even read anything within the SVG image file.

Upvotes: 5

Views: 2822

Answers (1)

Alan
Alan

Reputation: 180

TL;DR I am considering just putting all my label info into one aria-label on the svg element.

So far I am finding aria-label on g tags (with NVDA + Chrome + Win10) are not read out. The same aria-label applied to the svg element itself is read out.

At the moment I am assuming (some/most?) screen readers do not recognize g with aria-label, even though it is a valid attribute for the g element.

Still googling this; it's one of those searches which is tricky, given I am mostly searching for 'g' o_O

So I am considering a fallback of just putting all my label info into one aria-label on the svg element.

I would like to see some more authoritative views on the use of aria-label and g.

Upvotes: 3

Related Questions