WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: using .svg images accessibly

for

From: Birkir R. Gunnarsson
Date: Aug 6, 2017 11:58AM

Great summary Leonie.
The only thing I would add is that I generally advice against
assigning an accessible name directly to the link (especially using
aria-label) if the link contains any text outside the image (because
that text will get overridden).
For instance
< a href="#" aria-label="Facebook">Like this article on <img
src="facebook.jpg"></a>

The accessible name of this link will be "Facebook", not "Like this
article on Facebook".

This particular example is probably not that realistic, but I have
often seen developer abuse aria-label, not realizing that it overrides
accessible name from content (primarily on links).
In this situation it is a perfectly valid technique, and it can always
be a valid technique if used correctly.
In this example, for instance, the aria-label should be "like this
article on FAcebook", that way it includes the text inside the link as
well as the alt text of the image.

Just use aria-label with care.



On 8/6/17, Léonie Watson < <EMAIL REMOVED> > wrote:
>
> On 04/08/2017 18:10, Jonathan Avila wrote:
>> 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.
>
> The <svg> element maps to the graphics-document role, so its purpose
> isn't unspecified.
>
> It's also worth drawing a distinction between the <svg> element and the
> <img> element: the former may contain a single atomic image or consist
> of multiple components; the latter is always a single atomic image.
>
> One effect of this, is that browsers/screen readers don't try to find a
> substitute accessible name for an <svg> element if one doesn't exist.
> This is unlike the <img> element, where browsers/screen readers will use
> something like the src attribute instead of an accessible name.
>
> In the example discussed on this thread, the <svg> contains a single
> atomic image (an icon). It could be given an accessible name directly,
> in which case that would serve as the accessible name for its parent
> link, or (because the icon is the only content of the link) the
> accessible name could be set on the link itself. It makes no material
> difference AFAIK.
>
> Birkir is right that you can hide a decorative <svg> element from screen
> readers by setting role="presentation" and (per the IE bug)
> aria-hidden="true". In this case, where the <svg> element is the only
> content of the link, I'm not sure that's the right choice though.
>
> Probably the best thing to do with this particular case, is to treat the
> .svg like a standard image format, and pull it into the HTML with the
> <img> element (including a suitable alt attribute).
>
> --
> @LeonieWatson @ <EMAIL REMOVED> tink.uk Carpe diem
> > > > >


--
Work hard. Have fun. Make history.