WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Birkir R. Gunnarsson
Date: Oct 17, 2017 9:35AM

Thanks guys

That is what I expected actualy, but just wanted theconfirmation from
the experts.


On 10/17/17, Léonie Watson < <EMAIL REMOVED> > wrote:
>
> 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
>


--
Work hard. Have fun. Make history.