html - Inline SVG <title> <desc> correct usage for accessilibility

Question

I am using a lot of inline svgs in my html and am a little confused about the best way to present them concerning accessibility.

I've see two methods to add <title> and <desc> to svgs -

<svg role="img" aria-label="[title + description]">
 <title>title text here</title>
 <desc>a description of the image here</desc>
 <path> etc.
</svg>

<svg role="img" aria-labelledby="my_svg_title my_svg_description">
 <title id="my_svg_title">title text here</title>
 <desc id="my_svg_description">a description of the image here</desc>
 <path> etc.
</svg>

The first method seems the best as I don't have to give unique IDs to each title and description (I have multiple svgs per page)? Is that the case? Is there anything else to take into consideration when choosing "aria-label" or "aria-labelledby"?

Also I am still confused a little about the role < desc > plays - is it exactly the same as alt? I always remove the xmlns and xmlns:xlink tags from inline svgs for optimisation, will google image search still reference these inline svgs as images? Will <desc> help with that?

If the inline svg will always display (do inline svgs ever not render?) then the <desc> will never be useful for missing images, which then only leaves page readers for accessibility which could use it. Do they?

Basically is it worth using/including <desc>?

Answer 1

Think of <title> like alt, think of <description> like <figcaption>

Your <title> should describe the image sufficiently to provide a user with an understanding of what the image contains.

If it is a complex image, or the image plays a vital role in an article that necessitates more details then use <description>.

Deque did a great test of different methods and found that your second version was the most reliable with a title and description linked via aria-labelledby and IDs, so use that.

Yes google will still reference them as images without xmlns served inline (provided you serve your page as mime type text/html otherwise you will get rendering issues). For external images I would leave it in, it is such a minor optimisation it isn't worth it.

Inline SVGs do not get indexed as far as I am aware in Google Image Search (but their content still contributes to your SEO in Google Search Algorithms slightly so it is still worth having <description> where appropriate.)

SVGs will always render if inline (assuming the browser supports SVG which is very likely).

Yes include <desc> if the image is sufficiently complex that you can't describe it with <title> in 20 words or less (general rule).

final thought - alt tags, titles etc. are all about accessibility, don't worry about them for SEO keywords as you will end up damaging usability. I know you didn't mention that but I thought I would put it in here for clarity.

p.s. - Next time, maybe limit this to 1 or 2 questions at once as that was a lot to answer!