CODEWITHSUNDEEP
htmlimagesvgaccessibility
js-learner
js-learner

Reputation: 507

Is it accessible to use SVG in IMG tag?

I have an SVG image that I am going to use on my website like this

<img src="test.svg" alt="This is a test alt" />

The question I have, is using .SVG with IMG selector and 'alt' tag OK/good for accessibility?

Upvotes: 3

Views: 8210

Answers (5)

Eduard
Eduard

Reputation: 93

I couldn't use it in REACT as img tag whatever solution I used. And as a object it would mess up the styling. The solution I came up with was to create a new TSX file that returns a svg html. In this way, I can call it wherever I'm in need of it. So something like this: REACT SVG Component

And then use it like this in your component. And that's all: Usage of REACT SVG Component

Upvotes: 0

dippas
dippas

Reputation: 60573

It doesn't matter the format (as long it is a valid one), it does matter the tag you use (img) and its attributes in this case the alt which has to be descriptive of the image user is seeing

And because you have a svg format, you can also use svg inline as long you follow the accessibility guidelines from W3C.

Provide text equivalents for graphics.

  • When the text content of a graphic (e.g., in a ‘text’ element) explains its function, no text equivalent is required. Use the ‘title’ child element to explain the function of ‘text’ elements whose meaning is not clear from their text content.
  • When a graphic does not include explanatory text content, it requires a text equivalent. If the equivalent is complex, use the ‘desc’ element, otherwise use the ‘title’ child element.
  • If a graphic is built from meaningful parts, build the description from meaningful parts.

Upvotes: 4

Nathaniel Flick
Nathaniel Flick

Reputation: 2963

Yes SVGs in an image tag are accessible with an alt. I have also seen an aria-label used but this is probably not necessary. You can also use SVGs natively (without the img tag) follow these specifications:

Make sure to test with the SiteImprove Chrome Extension and whichever screenreader you have access to, JAWS, NVDA or VoiceOver. If the svg is properly read, then chances are it's passed Accessibility.

Upvotes: 2

shahria jaman khan
shahria jaman khan

Reputation: 13

Yes. It is! But first I think we need to have a clear idea of what an image really is. Image is a graphical/visual representation of something. It could be a figure or art. Now there's numerous ways to display an image. But When it comes to format(JPG, PNG, GIF OR SVG),it is the method of how the image is is processed + stored and many other functionality. Once an image is displayed, the only thing that matters to common users, is the content. "alt" is an accessibility attribute, which describes the content of the image. So there should be no relation with "alt" attribute with the format of the image.

Upvotes: 0

Martin Meli
Martin Meli

Reputation: 575

your example is fine, a screen reader can use the alt property to describe the image

Upvotes: 1

Related Questions