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: Amelia Bellamy-Royds <amelia.bellamy.royds@gmail.com>
Date: Tue, 5 Jul 2016 17:39:45 -0600
Message-ID: <CAFDDJ7xXRdA4VNDaXH_eZ-R0q5eSz=uTQXvK+ceyJLSt3PN5PA@mail.gmail.com>
To: James Nurthen <james.nurthen@oracle.com>
Cc: "public-aria@w3.org" <public-aria@w3.org>, SVG-A11y TF <public-svg-a11y@w3.org>
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"


On 5 July 2016 at 16:45, James Nurthen <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
> [image: Oracle] <http://www.oracle.com>
> James Nurthen | Principal Engineer, Accessibility
> Phone: +1 650 506 6781 <+1%20650%20506%206781> | Mobile: +1 415 987 1918
> <+1%20415%20987%201918> | Video: james.nurthen@oracle.com
> Oracle Corporate Architecture
> 500 Oracle Parkway | Redwood Cty, CA 94065
> [image: Green Oracle] <http://www.oracle.com/commitment> Oracle is
> committed to developing practices and products that help protect the
> environment

(image/gif attachment: green-for-email-sig_0.gif)

(image/gif attachment: oracle_sig_logo.gif)

Received on Tuesday, 5 July 2016 23:40:15 UTC

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