带有咏叹调标签的图标按钮仍然是“空按钮”错误

Question

一个带有aria-label的按钮：

<button type="button" class="btn btn-default dropdown-toggle"
  aria-expanded="false"
  aria-label="Sort">
  <i class="fa fa-arrows"></i>
</button>

仍然被WAVE识别为可访问性错误（'空按钮'）。有任何想法吗？

Answer 1

较旧的屏幕阅读器/浏览器不使用ARIA。使用视觉隐藏文本是一种更健壮的方法，如上面评论中CBroe留下的链接。

Answer 2

您可以与title属性一起添加aria-label属性。

不要试图隐藏文本只是为了满足WAVE工具栏，这不能被不使用屏幕阅读器的人阅读，并且可访问性不仅仅关注盲人。

不要删除aria-label属性，因为屏幕阅读器并不总是读取title属性。

但是，这看起来有点幼稚，但您可以考虑编写全文而不隐藏它。

<button type="button" class="btn btn-default dropdown-toggle">
  <i class="fa fa-arrows">Sort</i>
</button>

这在视觉上是您可以做到的最好的事情，每个人都可以完全访问，而不需要“标准”用户进行任何操作来查看按钮在小工具提示中的作用。

Answer 3

aria-label是一种非常广泛支持的方式，可以为已经具有屏幕阅读器可见标签的按钮添加可访问的名称。一种稍微广泛支持的技术是使用title属性而不是aria-label。这将确保自然而然地与Dragon的兼容性 - 这很好地支持了标题。注意：这假设存在可见标签 - 这对于输入字段这样的事情很重要（并且经常被忽略）。

如果您想要更新的可访问性检查程序，请使用我工作的公司（Deque Systems）的ax扩展。这是Chrome aXe extension和Firefox aXe extension

Answer 4

你可以像这样使用

<button type="button"><span class="icon-remove"></span><span class="sr-only">Close</span></button> 

使

.sr-only {display：None}