WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

Number of posts in this thread: 5 (In chronological order)

From: Birkir R. Gunnarsson
Date: Tue, Oct 17 2017 8:45AM
Subject: Are <svg> elements par of a webpage or separate documents?
No previous message | Next message →

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.

From: Steve Faulkner
Date: Tue, Oct 17 2017 9:01AM
Subject: Re: Are <svg> elements par of a webpage or separate documents?
← Previous message | Next message →

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

From: Steve Faulkner
Date: Tue, Oct 17 2017 9:14AM
Subject: Re: Are <svg> elements par of a webpage or separate documents?
← Previous message | Next message →

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

From: Date: Tue, Oct 17 2017 9:25AM
Subject: Re: Are <svg> elements par of a webpage or separate documents?
← Previous message | Next message →

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 ADDRESS REMOVED = tink.uk carpe diem

From: Birkir R. Gunnarsson
Date: Tue, Oct 17 2017 9:35AM
Subject: Re: Are <svg> elements par of a webpage or separate documents?
← Previous message | No next message

Thanks guys

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


On 10/17/17, LĂ©onie Watson < = EMAIL ADDRESS 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 ADDRESS REMOVED = tink.uk carpe diem
>


--
Work hard. Have fun. Make history.