Html 如何标记符合WCAG 2.0的按钮？ 在争取WCAG 2符合性的过程中，我发现相当多的关于正确处理按钮的信息，特别是需要考虑按钮的可访问性和柔顺性。

标记

的适当方式是什么？它们需要具备哪些属性或组合

我的按钮分为三类：

具有描述其预期操作的文本的按钮。（例如，“了解更多”以启动包含更多产品信息的模式）

具有不描述其操作的文本的按钮。（例如，“X”或手风琴内容部分的标题文本）

没有描述其预期操作或其他内容的文本的按钮。（例如，切换转盘上下文的图标/图像）

例如，在上面3的以下简单示例中：

是否可以只为没有文本的按钮添加

aria标签

属性？始终需要

name

和/或

value

吗？请派人来帮忙！谢谢大家!

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

---

这类问题始终取决于上下文。让我来试一试

• Learn More

  只要有人能从上下文中理解他们将学到更多的东西，就可以做到这一点。通常，按钮前面有一些描述性文本。然而，如果它只是把某人带到另一个页面，而不是触发一个模态，我会使用一个链接

• 和#215用于关闭按钮（我使用字符实体表示×，它比x更对称。同样，如果按钮位于模态的顶部（例如），可能与其标题相邻，那么这可能就足够了
  

• [icon]

  可用于旋转木马。请注意，如果不下载字体，字体图标可能会丢失。IE11和旧版本Edge的背景图像将在Windows高对比度模式（WHCM）下消失。

  aria标签

  对WHCM用户没有帮助。可能最好使用图像（甚至SVG）改为使用它的

  alt

  属性，这意味着您不需要

  aria标签

您不需要

名称

属性。它在这里没有任何用处
不要使用

role=“button”

属性。该角色自动成为
元素的一部分。如果您分配了另一个角色，则会出现大问题
绝对不要使用

标题

属性。这弊大于利
具有描述其预期操作的文本的按钮。（例如，“了解更多”以启动包含更多产品信息的模式）
即使我们不是在讨论链接，您也可以阅读的建议。文本“了解更多”可以在上下文中理解，但对于需要屏幕放大镜的低视力用户，例如，从按钮文本本身理解操作可能会很困难
例如，关于“公共汽车上的车轮”的文本“了解更多”可能看起来更合适
按钮的文本不描述其动作。（例如，“X”或标题部分手风琴内容的文本）
我在另一篇帖子中回答了这个问题：
您必须同时使用

aria标签

（对屏幕阅读器有用）和

标题

属性（对于使用标准浏览器的标准用户，可能需要更多支持）：

X

没有描述其预期操作或其他内容的文本的按钮。（例如，切换旋转木马上下文的图标/图像）
同样的道理也适用于这一点。但对于盲人来说，向左或向右移动旋转木马是一种不同的体验，有时是无用的。如果他们可以忽略他们看到的是旋转木马，而不丢失任何内容，使用键盘或他们的辅助技术导航，那么你就是在做预期的事情
此外，您必须永远不要忘记，

accessibility

不仅针对盲人用户，还针对儿童、老人、认知或敏感残疾人士。例如，

aria标签

永远不足以在需要时帮助这些人。他们没有屏幕阅读器，也不阅读HTML源代码

---

对于使用“语音识别软件”的用户（是的，他们并不多，但让我们改善他们的生活），没有任何可见文本也会导致困难。
关于#1，我同意如果它确实是一个“了解更多”类型的按钮，将显示更多信息，那么它应该是一个链接，除非更多信息包含在模式对话框中，在这种情况下，按钮是合适的。然而，即使在按钮之前有上下文文本也不总是足够的客户端。我喜欢倾向于WCAG 2.4.9，尽管这是AAA要求。如果我在页面上显示按钮列表（例如，从JAWS、ctrl+ins+b），按钮列表将显示“了解更多”而且我不会有任何上下文。最好在按钮上有一个aria标签，再加上一点上下文。关于

name

，这是WCAG 4.1.2（名称、角色、值）之间不幸的混淆和

name

属性。它们彼此不相关，但WCAG在此成功标准的名称中使用“name”太糟糕了。对象相对于WCAG的名称可以被视为对象的标签。也就是说，屏幕阅读器将如何称呼该对象。在按钮情况下，对象的“name”是介于在
标签或

aria标签上，此处不使用
名称
属性。关于@slagolicious”的第一点，请记住
aria标签
仅对屏幕阅读器有利。由于建议更详细通常有利于认知问题，请看一看如何使这一点对两位mUSE和键盘用户
<button
    aria-label="Back to the page"
    title="Close" onclick="myDialog.close()">X</button>