WCAG 合规性 - 角色为 "button" 且无内容的元素

Question

我正在尝试开发一个符合 WCAG 标准的网络应用程序，目前 codesniffer 给了我很多：

This element has a role of "button" but does not have a name available to an accessibility API. Valid names are: element content.

从这个HTML:

<span unselectable="on" class="k-select" aria-label="abcd" role="button"  alt="abcd" title="abcd" value="abcd">
  <span class="k-icon k-i-calendar"></span>
</span>

设置alt、value、title和aria-label似乎没什么用。我怎样才能拥有一个符合 WCAG 且 role="button" 且其中没有文本的元素？

Answer 1

您可以使用具有 aria-label 和 title 属性的 button 元素：

 <button class="k-select" role="button"
        aria-label="alternative for screen readers"
        title="alternative for other users"
        value="abcd">
   <span class="k-icon k-i-calendar"></span>
 </button>

Answer 2

Adam 将其转换为 <button> 是正确的。这是从一开始就最好的方法，也意味着您可以转储 role="button"。这也意味着您可以免费访问交互（例如，您不必收听 Space 栏或回车键）。

与其尝试使 <button> 本身具有易于访问的名称，不如将其放在图标上。如果您始终如一地这样做，您可以确定该图标始终具有可访问的名称，无论它是否位于按钮或 link.

等控件中

所以考虑这个 HTML:

<button class="k-select">
  <span class="k-icon k-i-calendar">Calendar</span>
</button>

现在你有一个普通的按钮，它还没有用属性来尝试使其可访问。另一方面，该图标现在包含文本，并且成为可访问的名称。

现在应用此 CSS 规则以在视觉上隐藏该文本：

.k-icon {
  position: absolute;
  top: auto;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE 6/7 */
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  white-space: nowrap; /* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe */
}

我通常把它作为一个实用工具 class (.visually-hidden) 这样我就可以在任何地方应用它。

FontAwesome talks about an approach similar to this 在其网站上以使其图标易于访问。

使用这种方法，您不需要任何 ARIA、任何一次性代码解决方案，也不需要任何脚本。这首先适用于您的图标（真正的问题），并且意味着当这些图标用于其他地方（links、按钮等）时，它们是可访问的。

此外，alt 和 value 对按钮均无效。 aria-label 是不必要的。 Definitely avoid title.

WCAG 合规性 - 角色为 "button" 且无内容的元素

WCAG Compliance - Element with role="button" and no content

html

accessibility

wcag

wai-aria

wcag2.0