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>
?