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

Thanks so much Ameia - that is really helpful.


On 7/5/2016 4:39 PM, Amelia Bellamy-Royds wrote:
> 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.
That is very ugly - Can you give me a hint as to which browsers require 
the role=presentation all the way down the tree. in addition to 
aria-hidden=true.
>
> 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.
These SVG elements are part of a menubar (the associated text is a 
focusable menuitem, the SVG needs to just go away as it is redundant and 
can't be a child of the menubar according to the spec....). Without 
changing the structure I don't think I can do it this way.
>
> 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.
This doesn't seem to be implemented.
>
> 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.
I wasn't aware that SVG elements took focus in IE/Edge. I will have to 
look into that. Do you know if there is a MSFT bug logged based on this 
behaviour?

regards,
James
>
> ~Amelia
>
> 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
>
>     Oracle <http://www.oracle.com>
>     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
>     Green Oracle <http://www.oracle.com/commitment> Oracle is
>     committed to developing practices and products that help protect
>     the environment
>
>

-- 
Regards, James

Oracle <http://www.oracle.com>
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 
<sip:james.nurthen@oracle.com>
Oracle Corporate Architecture
500 Oracle Parkway | Redwood Cty, CA 94065
Green Oracle <http://www.oracle.com/commitment> Oracle is committed to 
developing practices and products that help protect the environment