WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: using .svg images accessibly

for

From: Birkir R. Gunnarsson
Date: Aug 4, 2017 4:20PM

WE use both role="presentation" and aria-hidden="true" on
presentational SVG images (granted, it is a bit of an overkill, but
there was an IE bug that required us to use both).
But, yes, for the sake of clarity, you should use either attribute on
an SVG image to make sure it is marked as decorative.



On 8/4/17, Jonathan Avila < <EMAIL REMOVED> > wrote:
> I wanted to confirm with the group something related to this discussion
> regarding links with SVG images.
>
> Given that links are not child presentation elements -- use of SVG inside of
> a link would either require an accessible name on the sSVG or marking the
> SVG as decorative such as via aria-hidden. Would people agree with that?
> That is SVG should be treated similar to the img element where you cannot
> simply leave it's purpose unspecified unless it is otherwise supposed to be
> excluded from the accessibility tree.
>
> Jonathan
>
> Jonathan Avila
> Chief Accessibility Officer
> Level Access, inc. (formerly SSB BART Group, inc.)
> (703) 637-8957
> <EMAIL REMOVED>
> Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
> Looking to boost your accessibility knowledge? Check out our free webinars!
>
> The information contained in this transmission may be attorney privileged
> and/or confidential information intended for the use of the individual or
> entity named above. If the reader of this message is not the intended
> recipient, you are hereby notified that any use, dissemination, distribution
> or copying of this communication is strictly prohibited.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf
> Of Léonie Watson
> Sent: Friday, August 4, 2017 11:04 AM
> To: Sandy Feldman < <EMAIL REMOVED> >; WebAIM Discussion List
> < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] using .svg images accessibly
>
> On 03/08/2017 16:20, Sandy Feldman wrote:
>> What do you think?
>> http://haltontrophies.com/svg/
>
> These links work with screen readers, but probably not for the reasons you
> think.
>
> The accessible name (link text) for the link is being provided by the title
> attribute on the <a> element, not the <title> element in the SVG.
> If you remove the title attribute the links stop working properly with some
> screen reader/browser combinations.
>
> The reason is that you're using the <use> element in the SVG, with all the
> accessibility applied to the original definition of the icon. When you use
> the <use> element to duplicate the original, the accessibility isn't
> reliably inherited.
>
> A related problem is that the title attribute can cause problems when it's
> used on links. More on this here:
> https://www.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/
>
> You have a number of options...
>
> 1. Use the aria-label attribute instead of the title attribute.
>
> This will provide an accessible name for the link that screen readers can
> access, without the problems caused by the title attribute for other AT
> users:
>
> <a href="..." aria-label="Find me on YouTube">
>
> 2. Use the <title> element inside the <use> element.
>
> You'd need to do this every time you used the icon. Something like this:
>
> <a class="youtube" href="https://www.youtube.com/".
> <svg class="socialIcon">
> <use aria-labelledby="youtube-title" xlink:href="#icon-youtube"> <title
> id="youtube-title">Find me on YouTube</title> </use> </svg> </a>
>
> 3. Use an <img> element.
>
> The icons are just simple static images, so you could save each one in its
> own .svg file and use it like you would any other image format:
>
> <img src="youtube-icon.svg" alt="Find me on YouTube">
>
> You'll still get the flexibility/scalability of the SVG, but with the simple
> accessibility of the <img> element.
>
> HTH
> Léonie.
>
> --
> @LeonieWatson @ <EMAIL REMOVED> tink.uk Carpe diem
> > > http://webaim.org/discussion/archives
> > > > > >


--
Work hard. Have fun. Make history.