如何 mark-up 一个符合 WCAG 2.0 标准的按钮？

Question

在努力实现 WCAG 2.0 合规性的过程中，我发现了很多关于正确处理按钮的信息，特别是考虑按钮可访问性和合规性所需的信息。

mark-up 一个 <button> 的正确方法是什么？他们需要具备哪些属性或组合？

我的按钮分为三类：

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

是否可以只为没有文本的按钮添加 aria-label 属性？是否总是需要 name 和/或 value？请帮帮忙！谢谢！

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

Answer 1

这类问题总是取决于上下文。让我在没有上下文的情况下试一试。

<button>Learn More</button> 只要在上下文中有人能理解他们将学到更多的东西，就可以达到目的。通常按钮前面有一些描述性文字。但是，如果它只是将某人带到另一个页面而不是触发模式，我会使用 link.
<button aria-label="Close">×</button>用于关闭按钮（我使用的字符实体为×，比x更对称。同样，如果按钮位于模式的顶部（例如），可能与其标题相邻，那么这可能就足够了。
<button aria-label="Image 1">[icon]</button> 可以用于轮播。请注意，如果字体未下载，字体图标可能会丢失。对于 IE11 和旧版本的 Edge，背景图像将在 Windows 高对比度模式 (WHCM) 中消失。 aria-label 不会帮助 WHCM 用户。可能最好使用图像（甚至是 SVG）及其 alt 属性来代替，这意味着您不需要 aria-label.

您不需要 name 属性。它在这里没有任何用处。

不要使用 role="button" 属性。该角色自动成为 <button> 元素的一部分。如果你分配另一个角色，那你就有大问题了。

绝对不要使用 title 属性。这弊大于利。

Answer 2

Buttons that have text that describes their intended action. (e.g. "Learn More" to launch a modal with more product information)

即使我们不讨论链接，您也可以阅读 WCAG 2.4.9 Link Purpose (Link Only) 的建议。文本 "Learn more" 在上下文中可以理解，但对于需要屏幕放大镜的低视力用户，例如，很难从按钮文本本身理解操作。

例如文本 了解更多关于 "Wheels on the bus" 似乎更合适。

Buttons that have text that does not describe their action. (e.g. "X" or text that titles a section of accordion content)

我在另一个 post 中回答了这个问题： What is aria-label and how should I use it?

您必须同时使用 aria-label（对屏幕readers 有用）和 title 属性（对于使用标准浏览器的标准用户可能需要更多支持）：

<button
    aria-label="Back to the page"
    title="Close" onclick="myDialog.close()">X</button>

Buttons that do not have text that describes their intended action or otherwise. (e.g. An icon / image that switches the context of a carousel)

同样的道理也适用于这一点。但对于盲人来说，将轮播向左或向右移动是不同的体验，有时并没有什么用。如果他们可以忽略他们看到的是旋转木马，而不会丢失任何内容，使用键盘或他们的辅助技术进行导航，那么您就是在做预期的事情。

此外，您永远不要忘记 accessibility 不仅针对盲人用户，还针对儿童、老人、有认知或敏感障碍的人。例如，aria-label 永远不足以在需要时帮助那些人。他们没有屏幕 reader，也不阅读 HTML 源代码。

对于使用 "speech-recognition software" 的用户（是的，他们不是很多，但让我们改善他们的生活），没有任何可见的文本也会导致困难。

How to mark-up a button for WCAG 2.0 Compliance?