Font Awesome 可访问性问题。使用 <em> 标签代替 <i>

Question

我正在测试我的 HTML 代码标记是否符合可访问性标准： http ://achecker.ca/checker/index.php。以下是我得到的错误：

修复：用 em 或 strong 替换你的 i 元素。

 <i class="fa fa-search" title="Search"></i> <span class="sr-only">Search</span>

我浏览了有关辅助功能的官方 Font Awesome 文档（ https://cdn.fontawesome.com/help#qa-autoa11y ），但没有发现任何提及我需要为图标使用不同标签的内容。对此有什么想法吗？

原文由 sdvnksv 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

作为一般准则，您应该使用 em 来强调而不是 i 用于斜体文本，因为斜体文本通常仅用于暗示强调。

在这种情况下，您使用 i 作为 icon ，这是无稽之谈（并且混淆了您的可访问性检查工具）。使用 span 代替。这并没有加载任何不适当的语义。

原文由 Quentin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我知道这是 2016 年的答案……你可以在你的标签上使用 aria-hidden="true" ，如下所示： <i class="fa fa-search" aria-hidden="true"></i> ，寿。

解释如下： https ://rules.sonarsource.com/html/RSPEC-1100 和 https://www.w3.org/WAI/GL/wiki/Using_aria-hidden%3Dtrue_on_an_icon_font_that_AT_should_ignore

原文由 Lincoln Stuart Lima da Gama 发布，翻译遵循 CC BY-SA 4.0 许可协议