为什么 JAWS 屏幕 reader 不读取我的 Font Awesome 图标？

Question

我正在 table 上测试 JAWS 屏幕 reader，其单元格中具有以下标记：

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

我注意到屏幕 reader 无法“输入”上面的单元格（由于 aria-hidden），所以我删除了它：

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

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

有什么方法可以让某些文本只能在屏幕 reader 上访问而在 UI 上不可见？

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" 的，这会指示屏幕 reader 将其视为图像，因此它将读取 aria-label.

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

另一种方法是保留图标上的 aria-hidden 并添加一些 供屏幕 reader 用户使用。