WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: SVG graphics best practise of hiding content.

for

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

From: Murphy, Sean
Date: Thu, Feb 20 2020 8:13PM
Subject: SVG graphics best practise of hiding content.
No previous message | Next message →

All,

What is the best practise for hiding SVG content. Currently aria-hidden is being used. Any other methods?

Sean

From: Birkir R. Gunnarsson
Date: Fri, Feb 21 2020 10:14AM
Subject: Re: SVG graphics best practise of hiding content.
← Previous message | Next message →

From a "spectical" point of view (i.e. according to the SVG spec) n
<svg> element without a <title> <desc> or <text> is decortive, no
hiding required.
role="presentation" and tabindex="-1" was recommended as a fix for
Ie11 (that is no longe updated).
Obviously none of this works if the SVG element is focusable (in which
case it should not be hidden).


On 2/20/20, Murphy, Sean < = EMAIL ADDRESS REMOVED = > wrote:
> All,
>
> What is the best practise for hiding SVG content. Currently aria-hidden is
> being used. Any other methods?
>
> Sean
> > > > >


--
Work hard. Have fun. Make history.

From: Jonathan Avila
Date: Fri, Feb 21 2020 10:28AM
Subject: Re: SVG graphics best practise of hiding content.
← Previous message | Next message →

Hi Birkir, regarding SVG elements -- the SVG API Mappings document indicates they must be part of the accessiblity tree when certain situations are included https://w3c.github.io/svg-aam/#include_elements and also excluded when certain situations occur -- but it's not clear that user agents mut mark them decorative. So I find this actually to be a very complex topic I've dropped some standard SVG elements into Chrome and Chrome seems to show an svg with circle inside as SVG root for the SVG and ignored for the circle. So Chrome seems to include SVGs which have a graphics-document implied role as being in the tree and correctly ignore the circle element. So I'd say it's safer to mark the SVG explicitly as role presentation or aria-hidden if decorative.

Jonathan

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Birkir R. Gunnarsson
Sent: Friday, February 21, 2020 12:15 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] SVG graphics best practise of hiding content.

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.


From a "spectical" point of view (i.e. according to the SVG spec) n <svg> element without a <title> <desc> or <text> is decortive, no hiding required.
role="presentation" and tabindex="-1" was recommended as a fix for
Ie11 (that is no longe updated).
Obviously none of this works if the SVG element is focusable (in which case it should not be hidden).


On 2/20/20, Murphy, Sean < = EMAIL ADDRESS REMOVED = > wrote:
> All,
>
> What is the best practise for hiding SVG content. Currently
> aria-hidden is being used. Any other methods?
>
> Sean
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.

From: Birkir R. Gunnarsson
Date: Fri, Feb 21 2020 4:39PM
Subject: Re: SVG graphics best practise of hiding content.
← Previous message | No next message

That's the cool thing about this list, you never stop learning.
Thanks Jonathan


On 2/21/20, Jonathan Avila < = EMAIL ADDRESS REMOVED = > wrote:
> Hi Birkir, regarding SVG elements -- the SVG API Mappings document indicates
> they must be part of the accessiblity tree when certain situations are
> included https://w3c.github.io/svg-aam/#include_elements and also excluded
> when certain situations occur -- but it's not clear that user agents mut
> mark them decorative. So I find this actually to be a very complex topic
> I've dropped some standard SVG elements into Chrome and Chrome seems to show
> an svg with circle inside as SVG root for the SVG and ignored for the
> circle. So Chrome seems to include SVGs which have a graphics-document
> implied role as being in the tree and correctly ignore the circle element.
> So I'd say it's safer to mark the SVG explicitly as role presentation or
> aria-hidden if decorative.
>
> Jonathan
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Birkir R. Gunnarsson
> Sent: Friday, February 21, 2020 12:15 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] SVG graphics best practise of hiding content.
>
> CAUTION: This email originated from outside of the organization. Do not
> click links or open attachments unless you recognize the sender and know the
> content is safe.
>
>
> From a "spectical" point of view (i.e. according to the SVG spec) n <svg>
> element without a <title> <desc> or <text> is decortive, no hiding
> required.
> role="presentation" and tabindex="-1" was recommended as a fix for
> Ie11 (that is no longe updated).
> Obviously none of this works if the SVG element is focusable (in which case
> it should not be hidden).
>
>
> On 2/20/20, Murphy, Sean < = EMAIL ADDRESS REMOVED = > wrote:
>> All,
>>
>> What is the best practise for hiding SVG content. Currently
>> aria-hidden is being used. Any other methods?
>>
>> Sean
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
>
>
> --
> Work hard. Have fun. Make history.
> > > http://webaim.org/discussion/archives
> > > > > >


--
Work hard. Have fun. Make history.