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

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>

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

有没有办法把一些文本只能访问屏幕阅读器和不可见的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"的，这指示屏幕阅读器将其视为图像，因此它将读取aria-label。

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

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