为什么 JAWS 屏幕阅读器无法读取我的 Font Awesome 图标？

Question

我正在单元格中具有以下标记的表格上测试 JAWS 屏幕阅读器：

<center><i class="fa fa-check fa-1" title="MyTitle" aria-hidden="true" style="color:green" aria-label="read me"></i></center>

我注意到屏幕阅读器无法“输入”上面的单元格（由于 ）aria-hidden，所以我将其删除：

<center><i class="fa fa-check fa-1" title="MyTitle" style="color:green" aria-label="read me"></i></center>

现在它可以进入单元格但不读取任何文本。

有什么方法可以放置一些只能由屏幕阅读器访问且在用户界面上不可见的文本吗？

Answer 1

<center>
  <i class="fa fa-check fa-1" 
     title="MyTitle" 
     style="color:green" 
     aria-label="read me" 
     role="img">
  </i>
</center>

请注意我是如何添加的role="img"，这指示屏幕阅读器将其视为图像，因此它将读取aria-label.

如果没有它，一些屏幕阅读器将忽略aria-label某些元素的属性，因为它们“语义不正确”。

aria-hidden另一种方法是在图标上保留并添加一些供屏幕阅读器用户使用的视觉上隐藏的文本。