WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: methods to incorporaate svg

for

From: Léonie Watson
Date: May 20, 2016 3:41AM

> From: WebAIM-Forum on Behalf Of Sonja Weckenmann
> Sent: 19 May 2016 21:55
> When should I use "inline SVG" and when is it ok to pull it in via the <img>
> element?>
> I mean it is much easier to use a simmple <img> tag with an alt-attribut for
> simple images than an inline svg with role img, title and aria-labelledby?

When you pull SVG in using the <img> element, it is the same as pulling in any other graphics format (JPG, PNG etc.). You must provide the semantic information in the HTML, not the SVG.

In other words the <img> element has the default implicit role of "graphic" or "image" (depending on the platform), the alt attribute provides the accessible name for the image, and if needed a description can be provided using longdesc, aria-describedby or some other mechanism.

[...]
> Are there good reasons to use inline svg nevertheless (in one or both cases)?

If you're using the SVG as a simple static graphics format, then it's ok to pull it in using the <img> element. If you use SVG to present more structured content (where it's important for other roles and states to be recognised within the SVG), then for the time being it needs to be used inline within the HTML.


HTH
Léonie.

--
@LeonieWatson tink.uk Carpe diem