如何标记WCAG 2.0合规性按钮

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

标记<button>的适当方式是什么？它们需要具有哪些属性或组合？

我的按钮分为三类：

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

对于没有文本的按钮，只添加aria-label属性是否可以接受？是否始终需要name和/或value？请发送帮助！非常感谢。

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

这类问题总是取决于上下文。让我在没有上下文的情况下给它一个镜头。

<button>Learn More</button>只要有人能从上下文中理解他们将学到更多的东西，就可以做到这一点。通常按钮前面有一些描述性的文字。然而，如果它只是把某人带到另一个页面，而不是激发一个模态，我会使用一个链接。
<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属性。这弊大于利。

具有描述其预期操作的文本的按钮。(例如"了解更多"以启动具有更多产品信息的模式)

即使我们不是在谈论链接，您也可以阅读WCAG 2.4.9链接目的(仅限链接)的建议。文本"了解更多"在上下文中可以理解，但对于需要屏幕放大镜的低视力用户来说，可能很难从按钮文本本身理解动作。

例如，文本了解有关"Wheels on the bus"的更多信息可能更合适。

具有不描述其操作的文本的按钮。(例如"X"或标题为手风琴内容部分的文本)

我在另一篇帖子中回答了这个问题：什么是咏叹调标签？我应该如何使用它？

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

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

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

同样的推理也适用于这一点。但对于盲人来说，向左或向右移动旋转木马是一种不同的体验，有时毫无用处。如果他们可以忽略他们看到的是一个旋转木马，而不丢失任何内容，使用键盘或辅助技术进行导航，那么你正在做预期的事情。

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

在用户使用"语音识别软件"的情况下(是的，他们不多，但让我们改善他们的生活)，没有任何可见的文本也会导致困难。

相关内容