SVG accessibility causing invalid HTML (duplicate ID's) - svg

Question

Have an interesting one for the hive. I've done quite a bit of searching about and haven't found an answer to this on S.O. or elsewhere.
I am working on making our website as accessible as possible, this includes providing text alternatives to non-text content. (WCAG 1.1.1)
So far, we've followed the recommendations of CSS Tricks and Sitepoint
https://www.sitepoint.com/tips-accessible-svg/
https://css-tricks.com/accessible-svgs/
by adding:
role="img"
<title>
<desc>
and aria-labelledby, and providing an id for each <title> and <desc>
This works a treat when there is only one of a particular icon on the page. The problem arises when we have the same icon on the page more than once. Because our SVG's are being inlined, id'ing the <title> and <desc> tags will cause validation errors, which is also a no-no for accessibility. ( WCAG 4.1.1 )
So the question then becomes, how can we make our SVGs accessible while still maintaining valid HTML? My first thought was to pull the title and desc text into an aria-label on the tag, but would that then read twice to non-sighted users? Is it fine to leave off the aria-labelledby? Any help is much appreciated!
The full SVG code as it currently stands:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="120px" height="120px" viewBox="0 0 120 120" enable-background="new 0 0 120 120" xml:space="preserve" role="img" aria-labelledby="rings-svg rings-svg-desc" class="rings">
<title id="rings-svg">Ring</title>
<desc id="rings-svg-desc">An empty circle ring</desc>
<g>
<g>
<path fill="#E5E5E5" d="M60,112.151C31.245,112.151,7.85,88.756,7.85,60C7.85,31.245,31.245,7.851,60,7.851
S112.15,31.245,112.15,60C112.15,88.756,88.755,112.151,60,112.151z M60,9.426C32.113,9.426,9.425,32.113,9.425,60
S32.113,110.576,60,110.576S110.575,87.887,110.575,60S87.887,9.426,60,9.426z"></path>
</g>
<g>
<path fill="#E5E5E5" d="M60,117.5C28.295,117.5,2.5,91.705,2.5,60S28.295,2.5,60,2.5s57.5,25.795,57.5,57.5S91.705,117.5,60,117.5
z M60,4.075C29.163,4.075,4.075,29.162,4.075,60S29.163,115.925,60,115.925S115.925,90.838,115.925,60S90.837,4.075,60,4.075z"></path>
</g>
</g>
</svg>

Answer 1

If you can't change the id inside each element, you may be able to insert the accessible alternatives with the id once at the start of the page in a display:none element:
<div style="display:none">
<div id="rings-svg">Ring</title>
<div id="rings-svg-desc">An empty circle ring</desc>
</div>
And then insert your SVG in multiple places in your code
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="120px" height="120px" viewBox="0 0 120 120" enable-background="new 0 0 120 120" xml:space="preserve" role="img" aria-labelledby="rings-svg rings-svg-desc" class="rings">
<title>Ring</title>
<desc>An empty circle ring</desc>
<g>
<g>
<path fill="#E5E5E5" d="M60,112.151C31.245,112.151,7.85,88.756,7.85,60C7.85,31.245,31.245,7.851,60,7.851
S112.15,31.245,112.15,60C112.15,88.756,88.755,112.151,60,112.151z M60,9.426C32.113,9.426,9.425,32.113,9.425,60
S32.113,110.576,60,110.576S110.575,87.887,110.575,60S87.887,9.426,60,9.426z"></path>
</g>
<g>
<path fill="#E5E5E5" d="M60,117.5C28.295,117.5,2.5,91.705,2.5,60S28.295,2.5,60,2.5s57.5,25.795,57.5,57.5S91.705,117.5,60,117.5
z M60,4.075C29.163,4.075,4.075,29.162,4.075,60S29.163,115.925,60,115.925S115.925,90.838,115.925,60S90.837,4.075,60,4.075z"></path>
</g>
</g>
</svg>