WebAIM - Web Accessibility In Mind

E-mail List Archives

Are <svg> elements par of a webpage or separate documents?

for

From: Birkir R. Gunnarsson
Date: Oct 17, 2017 8:45AM

Good morning

I got an interesting question from a developer today who wants to use
the same id attribute on all <title> elements within an <svg> element
for the purposes of assigning alternative text.

<svg role="img" aria-labelledby="title">
<title id="title">alt text for the image</title>
...
</svg>

NVDA with Firefox only works when the img role is applied to <svg>
that are not implemented inline, at least preliminary testing
indicates that.

This does not work on regular html elements, since id attributes must
be unique within the page.
But doesn't <svg> work a bit like <iframe> elements in that they are
basically a totally separate entity from the rest of the page?

In that case I could use aria-labelledby="the same id" on all the
<svg> elements.
I am no svg expert yet (that is obvious *grin*) but I am dabbling in
it and thrilled by the possibilities for making images a lot more
ccessible.

Cheers
-B


--
Work hard. Have fun. Make history.