如何使Font Awesome WCAG 2.0兼容？

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> 

我意识到,规则应该不是真的适用于这种情况下,由于它的存在,以确保<em>和<strong>使用的,而不是他们的非语义同行<i>和<b>.但如果我有一个客户要求我检查所有WCAG2.0盒子,问题仍然存在.

所以有人知道什么是正确的方法.我应该改变它们<em>吗,这会给屏幕阅读器带来任何困难吗？欢迎任何其他建议!

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

Answer 2

来自font-awesome doc:

您可以使用CSS前缀fa和图标名称在任何地方放置Font Awesome图标.Font Awesome设计用于内联元素(我们喜欢'i'标签以简洁,但使用'span'在语义上更正确).

因此,您可以尝试更改'span'的'i'标签.