Question

如果我的网站上有几个字体很棒的图标，例如

<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>

我意识到规则不应该在这种情况下真正适用，因为它确保使用和而不是非语义对应和。但是如果我有一个客户要求我检查所有WCAG2.0盒子，问题仍然存在。

所以有人知道什么是正确的方法。我应该将它们更改为，这会给屏幕阅读器带来任何困难吗？欢迎任何其他建议！

Answer 1

首先， 在HTML5中具有语义含义（但在此之前只是表现形式）。假设您使用的是HTML5，那么您使用的验证程序将所有出现的标记为不合适。

第二，改变

<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>

Answer 2

来自font-awesome doc：

您可以使用CSS前缀fa和图标名称将Font Awesome图标放置在任何位置。 Font Awesome旨在与内联元素一起使用（我们喜欢'i'标签以简洁，但使用'span'在语义上更正确）。

因此，您可以尝试更改'span'的'i'标记。

Answer 3

它在很大程度上取决于i标记内部的内容是语义上的。 WCAG2.0是一套指导原则，而不是硬性规则。

根据HTML5规范：

i元素代表一个交替的声音或心情的文本范围，   或者以指示a的方式偏离正常散文   不同质量的文本，例如分类标识，a   技术术语，来自另一种语言的惯用短语，   西方文本中的音译，思想或船名。

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

如果内容需要“强调”，则不要使用em标记，因为在所有用户代理中语义都是正确的。关于动物的拉丁技术名称的规范示例是一个完美的例子，可以用斜体表示，但不强调（虽然在视觉上它们看起来一样）。

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

将被设计为：

Felis silvestris catus 很可爱。

因此，如果您可以证明文本为什么是“斜体”，但没有强调，请保持原样，否则将其更改为语义上合适的标记。

Answer 4

添加到danielnixon回答（+1）：如果我想在UI中使用fontawesome图标作为装饰物（不是链接，按钮等），我添加带有wai-aria属性的span：

＆＃13;

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

＆＃13;

如何使Font Awesome WCAG 2.0兼容？

4 个答案: