如何为符合WCAG 2.0标准的按钮进行标记？

Question

3

在努力实现WCAG 2.0合规性方面，我发现关于正确处理按钮的信息很多，特别是需要考虑哪些内容才能使按钮可访问和合规。

标记

- josephjbliss

2个回答

1

按钮应该有描述其意图的文本。(例如，“了解更多”启动带有更多产品信息的模态框)。

即使我们不谈论链接，您也可以阅读 WCAG 2.4.9链接目的（仅链接）的建议。在上下文中，“了解更多”这个文本可以被理解，但对于需要屏幕放大器的低视觉用户来说，从按钮文本本身很难理解操作。

例如，“了解有关“公共汽车上的轮子”的更多信息”可能更合适。

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

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

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

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

相同的推理可以适用于此点。但对于盲人而言，将旋转木马向左或向右移动是一种不同的体验，有时是无用的。如果他们可以忽略他们看到的是一个旋转木马，而不会失去任何内容，使用键盘或辅助技术进行导航，则您正在做所期望的事情。

另外，您必须永远不要忘记，无障碍性不仅针对盲人用户，还针对儿童，老年人，认知或敏感残疾人。例如，当需要时，aria-label将永远不足以帮助这些人。他们没有屏幕阅读器，也不阅读HTML源代码。

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

- Adam

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- aardrian · Accepted Answer

这种问题总是取决于上下文。让我试着不带上下文来回答。

只要在上下文中有人会理解他们将会了解更多的内容，<button>学习更多</button>就可以胜任。通常在按钮前面会有一些描述性文字。然而，如果它只是把某人带到另一个页面而不是触发模态框，我会使用链接。
<button aria-label="关闭">×</button>用于关闭按钮（我正在使用字符实体×，它比x更对称）。同样，如果按钮位于模态框的顶部（例如），可能相邻于其标题，则这可能足够了。
<button aria-label="图像1">[图标]</button>适用于走马灯。请注意，如果字体未下载，则字体图标可能会丢失。在IE11和旧版Edge的Windows高对比度模式（WHCM）中，背景图像将消失。 aria-label将无法帮助WHCM用户。最好使用图片（甚至是SVG）及其alt属性，因此您不需要aria-label。

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

不要使用role =“button”属性。该角色自动成为<button>元素的一部分。如果您分配了另一个角色，则会遇到大问题。

绝对不要使用title属性。它做的事情比带来好处更多。