时间戳

首页 > 解决方案 > 为什么 JAWS 屏幕阅读器无法读取我的 Font Awesome 图标？

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

问题描述

我正在一个表格上测试 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>

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

有什么方法可以让一些文本只能由屏幕阅读器访问，而在 UI 上不可见？

标签： accessibilityfont-awesomejaws-screen-reader

解决方案

<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图标上的 并添加一些用于屏幕阅读器用户的视觉隐藏文本。

推荐阅读