3

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?

dippas
  • 58,591
  • 15
  • 114
  • 126
js-learner
  • 457
  • 2
  • 9
  • 26

5 Answers5

4

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.
dippas
  • 58,591
  • 15
  • 114
  • 126
2

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.

Nathaniel Flick
  • 2,902
  • 2
  • 22
  • 31
  • 1
    that webAIM article is interesting, although pretty old! I've used SVG and JS to create interactive accessible graphics, you can add `tabindex` attributes to individual SVG sub elements e.g. `...` - most of aria is available too. It works pretty well across browsers apart from IE. But even IE can be made to work if required, by using xlink – brennanyoung Jun 23 '21 at 09:11
  • 1
    The other excellent extension to check accessibility is https://www.deque.com/axe – Seno Jun 28 '21 at 04:38
1

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

Martin Meli
  • 452
  • 5
  • 18
0

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.

shahria jaman khan
  • 13
  • 4
0

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

Eduard
  • 93
  • 9