添加 Aria 标签后，屏幕阅读器无法阅读

Question

我已经添加了 aria-label 但屏幕阅读器仍然无法读取第一个 div 的警告。 重点放在第一个 div 但不阅读任何内容。 如何告诉屏幕阅读器阅读警告图标？

<div aria-label="Warning for" class="col-xs-1 color-red-1 hbmi-warning m-t-2"></div>
<div class="col-xs-10 p-l-1x p-r-unset">Deductible Amount</div>

Answer 1

aria-label主要用于交互元素，尽管aria-label的文档没有具体说明。

本文档讨论了您可以可靠地使用它的元素， https://www.w3.org/TR/using-aria/#practical-support-aria-label-aria-labelledby-and-aria-describedby 。 倒数第三个要点说：

• 不要在span或div上使用 aria-label 或 aria-labelledby 除非它被赋予了角色。

我不会随意在<div>上添加一个role ，尤其是像alert这样的角色。

你想达到什么样的行为？
div是错误图标吗？
您想让屏幕阅读器用户找到这个div吗？ 它不是交互式元素。