E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 4 (In chronological order)

From: Sonja Weckenmann
Date: Thu, May 19 2016 2:54PM
Subject: methods to incorporaate svg
No previous message | Next message →

Hello,

I've read the article "Tips for creating accessible SVG" from Léonie
Watson (https://www.sitepoint.com/tips-accessible-svg/) and I have
following questions about incorporating a svg:

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?

And for complex imgages - couldn't I do it the same way and use alt +
ariadescribedby?
Are there good reasons to use inline svg nevertheless (in one or both
cases)?

thanks
sonja

From: Léonie Watson
Date: Fri, May 20 2016 3:41AM
Subject: Re: methods to incorporaate svg
← Previous message | Next message →

> 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

From: Sonja Weckenmann
Date: Fri, May 20 2016 8:16AM
Subject: Re: methods to incorporaate svg
← Previous message | Next message →

Ok, thank you, Léonie - also for this great article.
Sonja

Am 20.05.2016 um 11:41 schrieb Léonie Watson:
>> 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.
>

--
Sonja Weckenmann
BIK für Alle
BITV-Test

c/o DIAS GmbH
Schulterblatt 36 / 20357 Hamburg

Telefon 040 43 18 75 18
Fax 040 43 18 75 19

www.bik-fuer-alle.de
www.bitvtest.de

From: James Nurthen
Date: Fri, May 20 2016 9:44AM
Subject: Re: methods to incorporaate svg
← Previous message | No next message

> 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.
>

Inline SVG also gives you the ability to style it using CSS. This can be
another important consideration.


>
>
> HTH
> Léonie.
>
> --
> @LeonieWatson tink.uk Carpe diem
>
>
>
> > > > >