W3C home > Mailing lists > Public > public-svg-a11y@w3.org > July 2016

RE: What is the best way to hide decorative SVG using ARIA?

From: Matt King <a11ythinker@gmail.com>
Date: Thu, 7 Jul 2016 00:43:54 -0700
To: "'Amelia Bellamy-Royds'" <amelia.bellamy.royds@gmail.com>, "'James Nurthen'" <james.nurthen@oracle.com>
Cc: <public-aria@w3.org>, "'SVG-A11y TF'" <public-svg-a11y@w3.org>
Message-ID: <00a001d1d823$50577960$f1066c20$@Gmail.com>
Amelia, thank you! I am keeping this gem of a note in the event we address this in the APG.


From: Amelia Bellamy-Royds [mailto:amelia.bellamy.royds@gmail.com] 
Sent: Tuesday, July 5, 2016 4:40 PM
To: James Nurthen <james.nurthen@oracle.com>
Cc: public-aria@w3.org; SVG-A11y TF <public-svg-a11y@w3.org>
Subject: Re: What is the best way to hide decorative SVG using ARIA?


aria-hidden: true is the approach I'd recommend for hiding inline SVG markup, since it hides the entire document fragment.  Or it should, anyway, if the AT are implementing aria-hidden correctly; I've had testers say that they needed to add role="presentation" all the way down the tree to properly hide a fragment from some browser/AT combos.


Depending on the context, you could also hide the details of the markup by a role with the children presentational property to a parent element, provided its name isn't derived from contents.  So, if you have an SVG icon inside a button, and that button has an aria-label, then you shouldn't need to explicitly hide the SVG markup.


More generally: if the SVG does not include any text content, alt text content, or interactive content, then according to our latest mapping recommendations, role="presentation" on the <svg> should effectively remove the SVG from the accessibility tree: basic shapes and use elements are only supposed to be included if the author has given them alt text, a role, or interactivity.  But my recommendation would be to only use role="presentation" for cases when you want the SVG to be transparent (e.g., styled text where you just want the text content read out without identifying it as a graphic), and use aria-hidden for actually hiding redundant or purely decorative content.


One other thing: to prevent the <svg> element from gaining tab focus in IE/Edge, add a (obsolete, defined in SVG Tiny 1.2) focusable="false" attribute.




On 5 July 2016 at 16:45, James Nurthen <james.nurthen@oracle.com <mailto:james.nurthen@oracle.com> > wrote:

I found myself needing to hide some decorative SVG graphics from the accessibility API today. Is aria-hidden="true" the only method we have for doing this? It seemed like it was to me - did I miss anything obvious? 


Regards, James 

James Nurthen | Principal Engineer, Accessibility
Phone: +1 650 506 6781 <tel:+1%20650%20506%206781>  | Mobile: +1 415 987 1918 <tel:+1%20415%20987%201918>  | Video: james.nurthen@oracle.com <mailto:james.nurthen@oracle.com>  
Oracle Corporate Architecture
500 Oracle Parkway | Redwood Cty, CA 94065 
 <http://www.oracle.com/commitment> Oracle is committed to developing practices and products that help protect the environment 


(image/gif attachment: image001.gif)

(image/gif attachment: image002.gif)

Received on Thursday, 7 July 2016 07:44:30 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 17:28:21 UTC