WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: SVG graphics best practise of hiding content.

for

From: Jonathan Avila
Date: Feb 21, 2020 10:28AM

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 REMOVED> > On Behalf Of Birkir R. Gunnarsson
Sent: Friday, February 21, 2020 12:15 PM
To: WebAIM Discussion List < <EMAIL 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 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.