如何让Font Awesome WCAG 2.0兼容？ [英] How do I make Font Awesome WCAG 2.0 compatible?

问题描述

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

If I have a site with a couple of font awesome icons on it, e.g.

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

并通过WCAG 2.0验证程序运行此命令我收到以下错误消息：

And run this through the WCAG 2.0 validator I get the following error:

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盒子，问题仍然存在。

I realize that the rule shouldn't really apply in this case, as it is there to ensure that <em> and <strong> are used instead of their non-semantic counterparts <i> and <b>. But the problem still exists if I have a client that requires me to check all the WCAG2.0 boxes.

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

So does anyone know what would be the proper way. Should I change them to <em> instead, does that give screen-readers any difficulties? Any other suggestions are welcome!

推荐答案

from font-awesome doc：

from font-awesome doc:

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

You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements (we like the 'i' tag for brevity, but using a 'span' is more semantically correct).

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

So, you could try changing your 'i' tags for 'span'.

这篇关于如何让Font Awesome WCAG 2.0兼容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！