WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Steve Faulkner
Date: Oct 17, 2017 9:14AM

Also from looking at the accessibility tree - SVG in HTML is not
represented as a separate document, while an iframe is

--

Regards

SteveF
Current Standards Work @W3C
<http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w3c/>;

On 17 October 2017 at 16:01, Steve Faulkner < <EMAIL REMOVED> >
wrote:

> hi Birkir
>
> This does not work on regular html elements, since id attributes must
>> be unique within the page.
>
>
> SVG has similar restrictions:
>
> The 'id <https://www.w3.org/TR/SVG2/struct.html#IDAttribute>' attribute
>> must be unique within the node tree, must not be an empty string, and must
>> not contain any whitespace characters.
>>
>
> https://www.w3.org/TR/SVG2/struct.html#IDAttribute
>
>
> --
>
> Regards
>
> SteveF
> Current Standards Work @W3C
> <http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w3c/>;
>
> On 17 October 2017 at 15:45, Birkir R. Gunnarsson <
> <EMAIL REMOVED> > wrote:
>
>> 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.
>> >> >> >> >>
>
>