如何使 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> 

我意识到该规则不应该真正适用于这种情况，因为它可以确保使用 和 代替它们的非语义对应物 和 .但是如果我有一个客户端要求我检查所有的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.

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

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!

推荐答案

来自 font-awesome doc:

from font-awesome doc:

您可以使用 CSS Prefix 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).

因此，您可以尝试将i"标签更改为span".

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

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