Is it accessible to use SVG in IMG tag?

Question

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?

Answer 1

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:

• Official spec here for accessible svgs:
  w3.org/TR/SVG11/access.html#SVGAccessibilityGuidelines
• and an article here on WebAim for the Future of SVG accessibility: webaim.org/blog/future-web-accessibility-svg
• and here the W3C Editor's Draft (meaning it's not yet complete): w3.org/TR/SVG/access.html#SVGRelatedAccessibilityDocuments

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.