带有 aria-label 标签图标的按钮仍然是 'Empty Button' 错误

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 识别为可访问性错误 ('Empty Button')。有什么想法吗？

Answer 1

年长的 screenreaders/browsers 不要使用 ARIA。使用 visually-hidden 文本是一种更稳健的方法，如上面评论中留下的 link CBroe

Answer 2

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

如果您想要更多 up-to-date 辅助功能检查器，请使用我工作的公司 (Deque Systems) 的 ax 扩展。这是 Chrome aXe extension and the Firefox aXe extension

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

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

Answer 4

你可以这样使用

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

制作

.sr-only{display: None}

带有 aria-label 标签图标的按钮仍然是 'Empty Button' 错误

Button with icon labelled with aria-label still an 'Empty Button' error

html

accessibility

section508

htmlbutton

wai-aria