小编jos*_*iss的帖子

有一个有趣的蜂巢。我已经做了很多搜索，但没有在 SO 或其他地方找到答案。

我正在努力使我们的网站尽可能易于访问，这包括提供非文本内容的文本替代方案。( WCAG 1.1.1 )

到目前为止，我们已经遵循了 CSS Tricks 和 Sitepoint https://www.sitepoint.com/tips-accessible-svg/ https://css-tricks.com/accessible-svgs/的建议

通过添加： role="img" <title> <desc> and aria-labelledby，并id为每个<title>and提供一个<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> …

在争取WCAG 2.0合规性的过程中,我发现了关于按钮正确处理的各种信息,特别是要考虑按钮可访问和兼容的要求.

标记a的适当方法是<button>什么？他们需要具备哪些属性或组合？

我的按钮分为三类:

1. 具有描述其预期操作的文本的按钮.(例如"了解更多"以启动包含更多产品信息的模态)
2. 具有不描述其操作的文本的按钮.(例如"X"或标题为手风琴内容部分的文字)
3. 没有描述其预期操作或其他内容的文本的按钮.(例如,切换旋转木马上下文的图标/图像)

例如,在上面3的简单示例中:http://codepen.io/ga-joe/pen/ggeLeW

是否可以只aria-label为没有文字的按钮添加属性？是name和/或value总是需要？请发送帮助!谢谢!

这些似乎是相关的WCAG指南:

• https://www.w3.org/TR/WCAG20/#text-equiv-all
• https://www.w3.org/TR/WCAG20/#navigation-mechanisms-refs
• https://www.w3.org/TR/WCAG20/#ensure-compat-rsv