Question

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

此元素的作用是＆＃34; button＆＃34;但没有可用的名称到可访问性API。有效名称是：元素内容。

从这个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似乎没有任何好处。如何使用带有角色=＆＃34;按钮＆＃34;的WCAG兼容元素？里面没有文字吗？

Answer 1

Adam将此转换为<button>是正确的。这是从一开始就采用的最佳方法，也意味着您可以转储role="button"。这也意味着您可以免费获得交互的可访问性（例如，您不必监听空格键或Enter键）。

不要试图让<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

Answer 2

您可以将button元素与aria-label和title属性结合使用：

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

WCAG合规性 - 带角色的元素=＆＃34;按钮＆＃34;没有内容

2 个答案: