有一个有趣的 hive 。我已经做了很多搜索,但没有在 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 )
那么问题就变成了,我们如何在保持有效 HTML 的同时使我们的 SVG 可访问?我的第一个想法是将标题和 desc 文本拉到标签上的 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>
最佳答案
如果您无法更改 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>
关于SVG 可访问性导致无效的 HTML(重复 ID),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44765241/