Доступность SVG вызывает недопустимый HTML (повторяющиеся идентификаторы)

Получите интересную для улья. Я довольно много поискал и не нашел ответа на этот вопрос на S.O. или где-нибудь еще.

Я работаю над тем, чтобы сделать наш веб-сайт максимально доступным, включая предоставление текстовых альтернатив нетекстовому контенту. (WCAG 1.1.1)

До сих пор мы следовали рекомендациям CSS Tricks и Sitepoint https://www.sitepoint.com/tips-accessible-svg/ https://css-tricks.com/accessible-svgs/

добавив: role="img" <title> <desc> и aria-labelledby, и предоставив id для каждого <title> и <desc>

Это работает, когда на странице есть только один конкретный значок. Проблема возникает, когда один и тот же значок появляется на странице более одного раза. Поскольку наши SVG-файлы встроены, идентификация тегов <title> и <desc> вызовет ошибки проверки, что также является недопустимым для доступности. (WCAG 4.1.1)

Возникает вопрос: как сделать наши SVG доступными, сохранив при этом действительный HTML? Моя первая мысль заключалась в том, чтобы поместить заголовок и текст описания в метку арии на теге, но будет ли это дважды прочитано для незрячих пользователей? Можно ли отказаться от арии с лейблом? Любая помощь высоко ценится!

Полный код 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 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>

svg accessibility wcag screen-readers
person josephjbliss    schedule 26.06.2017    source источник
comment
У меня такая же проблема. не могли бы вы поделиться своим решением, если бы вы его нашли?   -  person molikh    schedule 12.06.2021

Ответы (1)


arrow_upward
1
arrow_downward

Если вы не можете изменить 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>
person Adam    schedule 27.06.2017
comment
Спасибо за ответ. Я бы хотел избежать добавления логики на страницу, если это возможно. SVG встраиваются через React и / или Rails. Для этого потребуется определить, что использовалось более одного и того же SVG, верно? В противном случае у вас может быть та же проблема, когда вы создали несколько одинаковых <div> с повторяющимися ids ... - person josephjbliss; 27.06.2017
comment
Считать не нужно. Вставьте div в свой HTML только один раз. Неважно, вставляете ли вы SVG 0, 1 или 3 раза. - person Adam; 28.06.2017