html - 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

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

与其尝试制作 <button>本身有易于访问的名称，将其放在图标上。如果您始终如一地这样做，您可以确定该图标始终具有可访问的名称，无论它是否位于按钮或链接之类的控件中。

考虑一下这个 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 */
}

我通常将它作为一个实用程序类 (.visually-hidden)，以便我可以在任何地方应用它。

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

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

此外，alt 都不是也不value对按钮有效。 aria-label是不必要的。 Definitely avoid title .