如何使Font Awesome兼容WCAG 2.0？

Question

如果我有一个网站上面有几个Font Awesome图标，例如：

<i class="fa fa-fw fa-cloud "></i>

当我将这个内容通过WCAG 2.0验证器运行时，我得到了以下错误：

Success Criteria 1.4.4 Resize text (AA)

  Check 117: i (italic) element used. 

  Repair: Replace your i elements with em or strong. 

  Error Line 185, Column 158: 

    <i class="fa fa-fw fa-cloud"></i> 

我意识到这个规则在这种情况下不适用，因为它的存在是为了确保使用语义化标签<em>和<strong>，而不是它们的非语义对应标签<i>和<b>。但如果我的客户要求我勾选所有 WCAG2.0 的框框，问题仍然存在。

所以，请问有人知道正确的方法吗？我应该将它们更改为<em>，那样会给屏幕阅读器带来任何困难吗？欢迎提出任何其他建议！

- zelexir

Answer 1

首先，在HTML5中，<i>标签具有语义意义（但在此之前仅为表现性）。假设您正在使用HTML5，则您使用的验证器错误地标记了<i>的所有出现都不合适。

其次，改变...

<i class="fa fa-fw fa-cloud"></i>

到

<span class="fa fa-fw fa-cloud"></span>

这么做很好，但它并不能解决真正的无障碍问题，也就是您没有任何文本替代品来代替图标（至少看起来是这样）。为了论证，请假设您的 fa-cloud 图标位于一个 <a> 标签内。可以使用类似以下示例的 Bootstrap 的 sr-only CSS 类：

<a href="...">
    <span class="fa fa-fw fa-cloud" aria-hidden="true"></span>
    <span class="sr-only">Download</span>
</a>

或者像这样（使用 WAI-ARIA 的 aria-label 属性）：

<a href="..." aria-label="Download">
    <span class="fa fa-fw fa-cloud" aria-hidden="true"></span>
</a>

这就是解决方案。更简单的方法是向所有人展示文本：

<a href="...">
    <span class="fa fa-fw fa-cloud" aria-hidden="true"></span>
    Download
</a>

- danielnixon

---

感谢你的努力，我给你点赞 :) 就我的情况而言，这些图标仅用于装饰作用。在其他用例中，如此处所述，aria/screen-reader-only 解决方案非常重要。 - zelexir

Answer 2

来自font-awesome文档：

您可以使用CSS前缀fa和图标名称在几乎任何地方放置Font Awesome图标。 Font Awesome设计用于与内联元素一起使用（我们喜欢使用“i”标记来简洁，但使用“span”更具语义正确性）。

因此，您可以尝试将“i”标记更改为“span”。

- kurroman

---

我实际上已经把整个项目的标签都改成了span。消除了验证工具中的错误，并且正如你所指出的，更符合语义规范。 - zelexir

Answer 3

很大程度上取决于标签内的内容语义。 WCAG2.0是一组指南，而不是硬性规定。

根据HTML5规范：

i元素表示与正常散文有所偏离的文本跨度，以替代语音或情绪， 或以其他方式表达不同质量的文本，例如分类名称，技术术语，来自另一种语言的习惯用语， 音译，思想或西方文本中的船名。

来自：http://www.w3.org/html/wg/drafts/html/master/text-level-semantics.html#the-i-element

如果内容需要“强调”，那么请勿使用标签，因为在所有用户代理中，标签是语义上正确的。规范中的例子，带有动物的拉丁技术名称，就是一个完美的例子，可以斜体显示，但不需要强调（尽管它们在视觉上看起来相同）。

<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>

将被样式化为:

Felis silvestris catus是可爱的。

因此，如果您可以证明文本为“斜体”，但不是强调，则保留原样，否则更改为语义上适当的标记。

- user764357

---

这个问题是关于fontawesome的，它在<i>元素内没有任何内容，因为它只存在于显示图形。 - Alexander Holsgrove

Answer 4

Adding to danielnixon answer (+1): if I want to use a fontawesome icon as a decorative thing in the UI (not a link, button, etc), I add a span with a wai-aria attribute:

<span class="fa fa-small-arrow" role="presentation"></span>

- maia

---

将 role="presentation" 添加到 span 中是多余的。http://www.w3.org/TR/wai-aria/roles#presentation。 - danielnixon