对屏幕阅读器和可访问性的 Font Awesome 支持答案

【问题标题】：Font Awesome support for screen readers and accessibility对屏幕阅读器和可访问性的 Font Awesome 支持
【发布时间】：2015-04-01 14:32:02
【问题描述】：

根据Font Awesome home page：

与其他图标字体不同，Font Awesome 不会绊倒屏幕阅读器。

我也知道建议给字体图标添加aria-hidden="true"属性，这样屏幕阅读器就可以忽略它们。

我的问题是，Font-Awesome 做了什么“不会绊倒屏幕阅读器”（我查看了他们的 GitHub 网站，但我找不到任何东西），我还需要添加 @987654324 @属性？

【问题讨论】：

我认为这是因为 FA 使用伪元素，因此屏幕阅读器无法读取 DOM 中的内容。
我正在使用来使用 font-awesome 所以 DOM 中有额外的标记。
但是没有这样的内容......它只是一个空的跨度......不是吗？那么您希望屏幕阅读器如何读取它？
嗯..似乎现代读者可能会读出来。这可能会有所帮助 - stackoverflow.com/questions/20953806/…

标签： accessibility font-awesome wai-aria screen-readers icon-fonts

【解决方案1】：

最佳情况：

<a href="https://www.facebook.com/#" title="Your title">
  <i class="fa fa-facebook" aria-hidden="true"></i>
  <span class="screen-reader-text">We are on Facebook</span>
</a>

【讨论】：

【解决方案2】：

他们只是简单地说出他们解剖结构的阴暗区域。除了图像还有什么图标字体？当纯粹作为图标呈现时，他们的图标字体没有替代文本。在带有 Safari 的 OS X 上，它们被读出为难以理解的字符，而不是对图标是什么的描述......所以......我应该如何外交地说这个......

FONT AWESOME 的图标无法访问！！！

只是为了说明，这里是他们的“buyselladds”图标的标记

<i class="fa fa-buysellads"></i>

我看不到图标的描述。你可以吗？这怎么可能访问？

【讨论】：

点个赞。顺便说一句，我读到使用而不是 更“正确”。
默认情况下它们是不可访问的（您必须提供某种替代文本），但它们的“不会出错”的含义可以在 source 中看到：“Font Awesome 使用Unicode Private Use Area (PUA)，以确保屏幕阅读器不会读取代表图标的随机字符”