如何标记 WCAG 2.0 合规性的按钮？

Posted 2023-02-24

【中文标题】如何标记 WCAG 2.0 合规性的按钮？

【英文标题】：How to mark-up a button for WCAG 2.0 Compliance?

【发布时间】：2017-06-18 18:25:43

【问题描述】：

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

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

我的按钮分为三类：

具有描述其预期操作的文本的按钮。 （例如，“了解更多”以启动包含更多产品信息的模式） 具有未描述其操作的文本的按钮。 （例如，“X”或以手风琴内容为标题的文本） 没有描述其预期操作或其他操作的文本的按钮。 （例如，切换轮播上下文的图标/图像）

例如，在上面 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

【参考方案1】：

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

<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 属性。这弊大于利。

【讨论】：

关于#1，我同意它应该是一个链接，如果它真的是一个“了解更多”类型的按钮，它将显示更多信息，除非更多信息包含在模式对话框中，在这种情况下一个按钮是合适的。然而，即使在按钮之前有上下文文本也并不总是足够的。我喜欢倾向于 WCAG 2.4.9，即使这是 AAA 要求。如果我要在页面上调出一个按钮列表（例如，从 JAWS，ctrl+ins+b），按钮列表将显示“了解更多”，我不会有任何上下文。最好在按钮上添加一个 aria-label 并提供更多上下文。

关于 name，这是 WCAG 4.1.2（名称、角色、值）和 name 属性之间的不幸混淆。它们彼此无关，WCAG 在此成功标准的名称中使用“名称”太糟糕了。相对于 WCAG 的对象名称可以被认为是对象的标签。也就是说，屏幕阅读器将如何调用该对象。在按钮的情况下，对象的“名称”是<button> 标记或aria-label 之间的文本。 name 属性在这里不起作用。

对于@slugolicious'的第一点，请记住aria-label 只对屏幕阅读器有益。由于更详细的建议通常对认知问题有好处，因此请查看如何使鼠标和键盘用户都可以使用：adrianroselli.com/2016/12/accessible-emoji-tweaked.html

这非常有用！感谢您的澄清和建议。

是的，aria-label 有利于辅助技术用户（不仅仅是屏幕阅读器用户，它也适用于盲文设备），所有 aria 属性也是如此。这就是咏叹调的全部意义，对吧？认知问题更棘手。有时，对于某些认知问题，更冗长会更糟，工具提示可能会分散注意力。我的观点是，如果你有上下文信息，正如你所提到的，希望这对认知者来说已经足够了。在“了解更多”按钮或链接中添加 aria-label 对 AT 非常有益。

【参考方案2】：

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

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

例如，文本了解更多关于“公交车上的车轮” 可能看起来更合适。

具有未描述其操作的文本的按钮。 （例如“X”或为手风琴内容命名的文本）

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

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

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

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

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

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

对于使用“语音识别软件”的用户（是的，他们不是很多，但让我们改善生活吧），没有任何可见的文字也会导致困难。