带有咏叹调标签图标的按钮仍然是一个空按钮＆＃39;错误

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标识为可访问性错误（＆＃39;空按钮＆＃39;）。有什么想法吗？

Answer 1

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

Answer 2

您可以添加title属性与<{strong> 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

您可以这样使用

..WebContent\WEB-INF\lib

制作

  

.sr-only {display：None}