Proper accessibility for inline svg used multiple times on the same page - svg

Question

What is the proper way to make an inline svg accessible when it is used multiple times on the same page? An example would be a twitter icon in the header and footer, or a logo that is repeated throughout the page. From my research I believe the following is best for unique svgs:
<svg aria-labelledby="title">
<title id="title" lang="en">Red Rectangle</title>
<g>
<rect x="0" y="0" width="100" height="50" fill="red" />
</g>
</svg>
Using aria-labelledby and title, as well as description if needed. However in the case of an inline svg that is repeated, I have not been able to find an answer on the web. Is something like the following acceptable?
<svg role="img">
<title>Red Rectangle</title>
<g>
<rect x="0" y="0" width="100" height="50" fill="red" />
</g>
</svg>
Or what about just using aria-label? Thanks in advance!

Answer 1

The human side
Why your image is repeated multiple times ?
While choosing an alternative text for your image, remember that there are two kind of images on the web: illustrative images, and functional images.
The former don't absolutely need an alt text, while the later absolutely requires an alt text.
IF you give an alt text for the former, it should be a description of the image, while the alt text for the later must rather tell what the action is about than a simple visual description.
You can look at this question and my answer for more details about that.
IF your images are repeated multiple times, it's quite probable that they are functional ones. If we assume that it's the case:
If they all trigger exactly the same action, they must all have exactly the same label. Examples: several links to the same page, or a share icon at the beginning and the end of an article
If they don't trigger exactly the same action, or not on the same item, then they must all have different label. Example: add an item to cart. In that case, ideally, the label of the image should also tell on which item it operates.
The technical side
If your images are functional and all doing exactly the same action (see above), your problem is that you can't have multiple times the same id for a whole page.
Technically, referencing a <title> present in another SVG should work, but I would still prefer avoid it just in case. Inline SVG aren't as well supported than good old <img/> by screen readers.
It would be better to use good old <img/>, or generate unique ids.
Note that aria-label and aria-labelledby are guaranteed to work with all screen readers only on interactive/focusable elements.
If your images are focusable, then fine as long as all id are unique, although it would even be better to have the alt text as a visually hidden text in an enclosing link or button.
IF your images aren't focusable, keep in mind that aria-label/aria-labelledby may be totally ignored, but anyway in that case you have another accessibility problem: in principle, functional image should be made focusable, otherwise keyboard only users won't be able to trigger the action.