为什么JAWS屏幕阅读器无法读取Font Awesome图标及添加屏读专属文本？

问题根因 #

你遇到的不朗读问题是兼容性导致的：空的无内容<i>标签属于无语义装饰元素，JAWS等屏幕阅读器和主流浏览器的组合默认不会读取这类元素的aria-label属性。

推荐解决方案 #

最通用稳定的方案是使用屏幕阅读器专属隐藏类，实现视觉上完全隐藏、仅屏幕阅读器可读取的文本效果，这也是W3C官方推荐的无障碍实现规范。

1. 首先在全局CSS中添加如下通用隐藏类（所有前端框架通用，不需要依赖第三方库）：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

2. 修改你的单元格代码如下：

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

这里建议把图标元素重新加上aria-hidden="true"，避免屏幕阅读器尝试识别装饰性的图标元素，减少冗余朗读内容。

替代方案（无需额外CSS） #

如果当前场景不方便修改全局CSS，且整个单元格只有这一个图标没有其他可见内容，可以直接给单元格的<td>标签添加aria-label属性：

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

内容的提问来源于stack exchange，提问作者andreasperelli