带图标的按钮，使用aria-label标记，仍然出现“空按钮”错误。

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中，这个按钮仍被识别为一个可访问性错误（“空按钮”）。有什么想法吗？

- Christine

---

我不确定，但Nicholas C. Zakas得出结论，在这种情况下完全放弃ARIA，采用简单的文本内容，并以屏幕阅读器友好的方式隐藏，是更好的选择。 - CBroe

Answer 1

老一些的屏幕阅读器/浏览器不使用ARIA。使用视觉上隐藏的文本是一种更强大的方法，就像CBroe在上面的评论中留下的链接中所示。

- stringy

---

虽然无法访问，但视觉隐藏文本并非"强大的方法"；它只是一种诀窍，使屏幕阅读器读取一些无法访问的内容。它不会帮助其他用户（无论他们是否有认知障碍）理解fa-arrows的含义，这个符号通常用于移动事物，而不是排序。这是一个选择不太好的图标，没有视觉替代品。 - Adam

Answer 2

你可以在 aria-label 属性的同时添加 title 属性。

不要试图隐藏文本只是为了满足 WAVE 工具栏，这对于不使用屏幕阅读器的人来说是无法阅读的，辅助功能并不仅仅关注盲人。

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

但是，这可能看起来有点天真，但你可以考虑编写完整的文本而不隐藏它。

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

这是视觉上最好的方式，可以使每个人都能完全访问，不需要“标准”用户采取任何操作来查看按钮在小工具提示中执行的操作。

- Adam

Answer 3

aria-label 是一种非常广泛支持的方式，可以为屏幕阅读器中已经有可见标签的按钮添加可访问名称。稍微更广泛支持的技术是使用 title 属性而不是 aria-label。这将确保与非常好地支持 title 的 Dragon 自然语音兼容。注意：这假设存在可见标签，对于像输入字段之类的东西来说，这很重要（也经常被忽视）。

如果您想要一个更实时的无障碍检查器，请使用我所在公司（Deque Systems）的 aXe 扩展程序。这是 Chrome aXe extension 和 Firefox aXe extension

- unobf

Answer 4

你可以像这样使用

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

制作

.sr-only{display: None}

- Amarender Reddy

---

几乎。设置display:none将隐藏屏幕阅读器中的“Close”，除非该元素具有ID并且被另一个元素的aria-labelledby引用。因此，您需要使用 <button type="button" aria-labelledby="foo"><span class="icon-remove"></span><span id="foo" class="sr-only">Close</span></button>。 - slugolicious

如果您需要屏幕阅读器读取按钮，请添加 aria-labelledby 属性，否则它会被读为空白。 - Amarender Reddy