WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Date: Oct 17, 2017 9:25AM

On 17/10/2017 15:45, Birkir R. Gunnarsson wrote:
> 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?

No, SVG is considered embedded content in HTML [1]. When SVG is embedded
into an HTML document, browsers automatically switch to the SVG
namespace providing the document is using the HTML5 doctype.

In other words, the ids need to be unique. The solution would be to use
the SVG <use> element (assuming every instance was the same graphic),
but unfortunately accessibility support for the <use> element is pretty
poor at the moment.


HTH

[1] https://www.w3.org/TR/html52/semantics-embedded-content.html#svg

>
> 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
>
>

--
@LeonieWatson @ <EMAIL REMOVED> tink.uk carpe diem