WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: using .svg images accessibly

for

From: Date: Aug 6, 2017 8:39AM

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