7

带有 的按钮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仍将其识别为可访问性错误（“空按钮”）。有任何想法吗？

4

4 回答 4

5

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

于 2016-01-16T05:28:01.883 回答
3

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

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

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

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

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

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

于 2016-01-17T14:12:38.003 回答
0

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

如果您想要更新的可访问性检查器，请使用我工作的公司 (Deque Systems) 的 ax 扩展。这是Chrome ax 扩展和Firefox ax 扩展

于 2016-01-16T19:58:51.400 回答
0

你可以这样使用

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

制作

.sr-only{显示：无}

于 2019-03-11T18:04:01.523 回答