SVG无障碍性导致HTML无效（重复的ID）

Question

SVG无障碍性导致HTML无效（重复的ID）

5

我有一个关于网站的问题需要帮忙解决。我已经进行了一些搜索，但在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

并为每个<title>和<desc>提供了一个id。当页面上只有一个特定图标时，这种方法效果很好。当我们在页面上有多个相同的图标时，问题就出现了。因为我们的SVG文件是被内联显示的，给<title>和<desc>标签加上ID会导致验证错误，这也不利于辅助功能。（WCAG 4.1.1）

因此，问题变成了如何在保持有效的HTML的同时使SVG文件易于访问？我的第一个想法是将标题和描述文本拉入aria-label标签中，但这样对非视觉用户是否重复阅读两次？现在可以不提供aria-labelledby吗？非常感谢您的帮助！

以下是完整的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>

- josephjbliss

我也遇到了同样的问题。如果你已经找到解决方案，能否分享一下？ - molikh

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adam · Accepted Answer

如果您无法更改每个元素内部的id，则可以在页面开头的display:none元素中插入可访问的替代项以一次性添加id。

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