Html WCAG合规性-角色为“”的元素；按钮“；而且没有内容

我正在尝试开发一个与WCAG兼容的web应用程序，目前它给了我很多：

此元素具有“button”角色，但没有可用的名称 到可访问性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>

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

设置

alt

、

value

、

title

和

aria-label

似乎没有什么好处。

---

如何使符合WCAG的元素具有role=“button”且其中没有文本？

您可以使用带有

aria标签和
标题属性的
按钮
元素：

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

亚当正确地将其转换为
。从一开始这就是最好的方法，也意味着您可以转储
role=“button”
。这也意味着你可以免费获得互动的可访问性（例如，你不必听空格键或回车键）

不要试图使
本身具有可访问的名称，而是将其放在图标上。如果始终这样做，则可以确定图标始终具有可访问的名称，无论它是否位于按钮或链接之类的控件中

请考虑这个HTML:< /P>
<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>

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

我通常把它作为一个实用类（
。可视化隐藏
），这样我就可以在任何地方应用它

在其网站上，使其图标可访问

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

另外，
alt
和
value
对按钮都无效<代码>aria标签
是不必要的
 在隐藏文本时，您必须在按钮上设置
title
属性，以便为99%未使用屏幕阅读器的用户提供图标的正确可见替代品，因为他们不会理解一个看起来像书包的奇怪正方形可能意味着什么。我们绝对必须停止那种“视觉隐藏”/“避免标题”的策略，这种策略对绝大多数用户没有帮助。
title
对纯触摸显示屏（或不使用鼠标的混合显示屏）的用户没有任何帮助。只有IE10+在键盘焦点上显示
title
。我理解您为什么要在这里应用它，但是
title
是一个不合适的替代方案，它会导致开发人员认为他们正在使某些东西变得可访问，而实际上他们并没有。问题是关于WCAG失败的，许多审计员会让只使用
标题的按钮失败。这个问题还涉及到a11y API，API中的浏览器对
title
的处理不一致。只要我们了解到隐藏文本并不能为99%的用户提供正确的选择，那么同时使用
title
和
aria label
将是一个覆盖更多用户的解决方案。但你是对的，毫无疑问，当图标不够用时，有一个永久可见的文本是触摸屏显示的最佳选择。@aardri是一个很好的答案。我将此应用于另一个场景，在新选项卡target=“\u blank”中打开一个链接，以直观地隐藏文本。谢谢Adam。唯一的问题是，这个输出是由第三方组件生成的，因此我无法真正将跨度更改为按钮，我最终放弃了该组件，使用了另一个内置wcag支持的组件。