html - 如何为 WCAG 2.0 Compliance 标记按钮？

Question

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

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

我的按钮分为三类:

1. 具有描述其预期操作的文本的按钮。 (例如，“了解更多”以启动包含更多产品信息的模式)
2. 具有未描述其操作的文本的按钮。 (例如，“X”或标题 Accordion 内容部分的文本)
3. 没有描述其预期操作或其他操作的文字的按钮。 (例如，切换轮播上下文的图标/图像)

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

Answer 1

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

1. <button>Learn More</button>只要在上下文中有人会理解他们将学到更多的东西，就可以做到这一点。通常按钮前面有一些描述性文字。但是，如果它只是将某人带到另一个页面而不是触发模式，我会使用链接。

2. <button aria-label="Close">&#215;</button>对于关闭按钮(我正在使用 × 的字符实体，它比 x 更对称。同样，如果按钮位于模式的顶部(例如)，也许与其标题相邻，那么这可能就足够了。

3. <button aria-label="Image 1">[icon]</button>可以为轮播工作。请注意，如果字体未下载，字体图标可能会丢失。对于 IE11 和旧版本的 Edge，背景图像将在 Windows 高对比度模式 (WHCM) 中消失。 aria-label不会帮助 WHCM 用户。可能最好使用图像(甚至是 SVG)及其 alt属性，这意味着您不需要 aria-label .

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

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

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