字体真棒可访问性问题。使用 标签而不是 答案

【问题标题】：Font Awesome accessibility issue. Use tags instead of 字体真棒可访问性问题。使用 标签而不是 
【发布时间】：2023-03-26 10:10:02
【问题描述】：

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

修复：将 i 元素替换为 em 或 strong。

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

我浏览了有关可访问性 (https://cdn.fontawesome.com/help#qa-autoa11y) 的官方 Font Awesome 文档，但没有发现任何关于我需要为图标使用不同标签的信息。对此有何想法？

【问题讨论】：

由于不涉及可读文本，i 可以安全使用。
...但如果您真的担心...请改用span。
developer.mozilla.org/en-US/docs/Web/HTML/Element/i
@Paulie_D，谢谢。我想我会用跨度替换它们以防万一。
Font Awesome 的documentation：Font Awesome 旨在与内联元素一起使用，我们建议坚持使用一致的 HTML 元素以在您的项目中引用它们。我们喜欢  标签是为了简洁，因为现在大多数人都在使用  强调/斜体的语义文本。如果那不是你的那杯茶，使用  在语义上更正确。

【解决方案1】：

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

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

【讨论】：

谢谢，有道理。
@sdvnskv 似乎这种传统智慧不再适用。 “在早期版本的 HTML 规范中，元素只是一个用于以斜体显示文本的表示元素，就像 元素用于以粗体显示文本一样。这不再是正确的，因为这些标签现在定义语义而不是印刷外观。” - developer.mozilla.org/en-US/docs/Web/HTML/Element/i
@JeromyFrench — 赋予i 元素的语义对于这个用例来说仍然是无意义的。

【解决方案2】：

在严格和语义化的 HTML 中，字体图标必须用 spans 标记：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<span class="fa fa-camera-retro"></span>

Font Awesome examples 与 （斜体标签）一起出现是因为缩写编码。就这样吧。

【讨论】：

【解决方案3】：

我知道这是 2016 年的答案...您可以在标签上使用 aria-hidden="true"，例如：, tho。

【讨论】：

【解决方案4】：

 元素表示其内容的强调重点。

如果您不强调某个特定单词的重点，那么您应该使用。

 元素更适合用于演示目的。

您可以使用 来标记引文——不是为了强调整个短语或段落，而是为了区分它或将其与正文相抵消。

在您的情况下，它可能建议使用，因为一些专门的辅助功能软件可能会更加强调处理它们。

【讨论】：