title: SVG accessibility causing invalid HTML (duplicate ID's)
body: <p>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.</p>
  
  <p>I am working on making our website as accessible as possible, this includes providing text alternatives to non-text content. (<a href="https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=111" rel="noreferrer">WCAG 1.1.1</a>)</p>
  
  <p>So far, we've followed the recommendations of CSS Tricks and Sitepoint
  <a href="https://www.sitepoint.com/tips-accessible-svg/" rel="noreferrer">https://www.sitepoint.com/tips-accessible-svg/</a>
  <a href="https://css-tricks.com/accessible-svgs/" rel="noreferrer">https://css-tricks.com/accessible-svgs/</a></p>
  
  <p>by adding: 
  <code>role="img"</code>
  <code>&lt;title&gt;</code>
  <code>&lt;desc&gt;</code>
  and <code>aria-labelledby</code>, and providing an <code>id</code> for each <code>&lt;title&gt;</code> and <code>&lt;desc&gt;</code></p>
  
  <p>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 <code>&lt;title&gt;</code> and <code>&lt;desc&gt;</code> tags will cause validation errors, which is also a no-no for accessibility. ( <a href="https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=111#ensure-compat" rel="noreferrer">WCAG 4.1.1</a> )</p>
  
  <p>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!</p>
  
  <p>The full SVG code as it currently stands:</p>
  
  <pre><code>&lt;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"&gt;
    &lt;title id="rings-svg"&gt;Ring&lt;/title&gt;
    &lt;desc id="rings-svg-desc"&gt;An empty circle ring&lt;/desc&gt;
    &lt;g&gt;
      &lt;g&gt;
        &lt;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"&gt;&lt;/path&gt;
      &lt;/g&gt;
      &lt;g&gt;
        &lt;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"&gt;&lt;/path&gt;
      &lt;/g&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>