3

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

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

我的按钮分为三类：

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

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

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

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

4

2 回答 2

8

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

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

于 2017-02-01T21:07:54.017 回答
1

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

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

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

具有未描述其操作的文本的按钮。（例如“X”或标题手风琴内容部分的文本）

我在另一篇文章中回答了这个问题： 什么是 aria-label 以及我应该如何使用它？

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

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

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

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

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

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

于 2017-02-02T11:02:25.813 回答