What's the difference in accessibility between having SVG inline or as an image?

Question

I am developing a web page trying to focus on accessibility, and created different graphics in SVG to go in it. After reading different sites online ( 1 , 2 , and 3 ), I included the <title> and <desc> tags, and added the attributes role and aria-labelledby to make the SVGs more accessible.

Some of those sources, seem to claim (directly or indirectly) that using SVG inline is better for accessibility; so I ran a few tests with NVDA to see the differences, but I fail to see any at first sight.

For example, using a simple SVG:

 <svg width="100" height="100" viewBox="0 0 100 100" role="img" aria-labelledby="title desc"> <title id="title">Abstract Forms</title> <desc id="desc">Red square containing a white circle containing a blue triangle pointing up.</desc> <g stroke="none" stroke-width="0"> <rect x="0" y="0" width="100" height="100" fill="red" /> <circle cx="50" cy="50" r="40" fill="white" /> <path d="M 50,20 80,70 20,70 Z" fill="blue" /> </g> </svg> 

If I add it to the page like that, NVDA reads " Graphic. Abstract Forms. Red square containing a white circle containing a blue triangle pointing up. "

And if I save it into a myImg.svg file, and add it to the page like this:

<img src="myImg.svg" alt="Red square containing a white circle containing a blue triangle pointing up" title="Abstract Forms" />

NVDA then reads " Graphic. Red square containing a white circle containing a blue triangle pointing up. " (same thing as before, just not reading the title).

This may be an NVDA thing, and other screen readers may do it differently, but there doesn't seem to be any considerable difference between the two. At least not to claim that inlining the SVG is better for accessibility.

Then I thought it could be related to reading additional information; for example, if there was some text within the graphic. So I added a <text x="50" y="50" fill="black">Hello World</text> at the end of the SVG... but NVDA read the same thing as before; not even selecting the text it will read it (again I don't know if this is an NVDA thing and if other screen readers do it differently).

So my questions are: what are the differences between having SVG inline or as an image? And what are the benefits (for accessibility) of having the SVG inline?

Answer 1

You probably already self-answered your question.

Inline-svg is interpreted as part of the html webpage. So your svg title and description are interpreted as well and read by the screen reader.

When using an 'img' tag to include the svg, the file is handled like an external file (like a jpg) and so only the 'alt' attribute of the img tag (= the image description) is interpreted/read by the screen reader.

I have currently no source and can't test it a the moment, but I think there are also differences for links within the svg code: Links within inline svg are read by the screenreader, links within external svg files not.