11

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

<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>and<strong>而不是它们的非语义对应物<i>and <b>。但是如果我有一个需要我检查所有 WCAG2.0 框的客户，问题仍然存在。

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

4

4 回答 4

24

首先，在 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-onlyCSS 类）：

<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>
于 2014-12-18T03:12:55.720 回答
8

来自字体真棒文档：

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

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

于 2014-12-09T17:03:57.760 回答
2

这在很大程度上取决于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>

将被样式化：

Felis silvestris catus很可爱。

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

于 2014-05-14T05:37:41.523 回答
0

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

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

于 2015-08-04T16:18:16.107 回答