All geek questions in one place

SVG accession causing invalid HTML (duplicate IDs)

There is an interesting hive. I searched quite a lot and did not find an answer to this on SO or elsewhere.

I am working to make our site as accessible as possible, including providing textual alternatives to non-textual content. ( WCAG 1.1.1 )

So far, we have followed the recommendations of CSS Tricks and Sitepoint https://www.sitepoint.com/tips-accessible-svg/ https://css-tricks.com/accessible-svgs/

adding: role="img" <title> <desc> and aria-labelledbyand providing idfor each <title>and<desc>

This works when there is only one specific icon on the page. The problem occurs when we have the same icon on the page more than once. Because our embedded SVG, identification tags <title>and <desc>lead to error checking, which also does not matter to availability. ( WCAG 4.1.1 )

So then the question is, how can we make our SVGs accessible while still maintaining valid HTML? My first thought was to pull out the title and describe the text in the aria label on the tag, but would it read twice to unsuspecting users? Is it great to get away from aria-labelledby? Any help is much appreciated!

Full SVG code at the moment:

<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>
+4
1

id , id display:none:

<div style="display:none">
  <div id="rings-svg">Ring</title>
  <div id="rings-svg-desc">An empty circle ring</desc>
</div>

SVG

<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>
+1

Source: https://habr.com/ru/post/1680136/

More articles:


All Articles