如何使字体与WCAG2.0兼容？

Question

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

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

并通过WCAG2.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>，这会给屏幕阅读器带来任何困难吗？欢迎任何其他建议！

Answer 1

从字体-很棒的医生：

您可以使用CSS前缀fa和图标的名称将字体放在任何地方。字体是设计用来与内联元素(我们喜欢'i‘标记简洁，，但使用'span’是更语义正确的)。

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

Answer 2

首先，<i>在HTML5中确实有语义意义(但在此之前只是表示性的)。假设您使用的是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-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 3

这在很大程度上取决于i标记中的内容在语义上是什么。WCAG2.0是一组指南，而不是硬而快速的规则。

根据HTML5规范：

I元素以另一种声音或心情表示文本跨度，或以其他方式与普通散文相抵消，以表明文本的不同质量，如分类学名称、技术术语、来自另一种语言的习语短语、音译、思想或西方文本中的船舶名称。 来自：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>

将采用下列方式：

金丝雀是可爱的。

因此，如果你能证明为什么文本是“斜体”，但没有强调，保持它的原样，否则将它更改为一个语义上合适的标签。