How do I make Font Awesome WCAG 2.0 compatible?

Question

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

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

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> 

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!

Answer 1

from font-awesome doc:

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

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

Answer 2

First, <i> does have semantic meaning in HTML5 (but was only presentational before that). Assuming you're using HTML5, the validator you're using is wrong to flag all occurrences of <i> as inappropriate.

Second, changing

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

to

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

is good but it doesn't fix the real accessibility issue, which is that you don't have any text alternative to the icon (at least it appears that you don't). For the sake of argument, let's assume your fa-cloud icon is inside an <a> tag. Something like this (using Bootstrap's sr-only CSS class):

<a href="...">
    <span class="fa fa-fw fa-cloud" aria-hidden="true"></span>
    <span class="sr-only">Download</span>
</a>

or like this (using WAI-ARIA's aria-label attribute):

<a href="..." aria-label="Download">
    <span class="fa fa-fw fa-cloud" aria-hidden="true"></span>
</a>

is the solution. Even simpler would be to show the text to everyone:

<a href="...">
    <span class="fa fa-fw fa-cloud" aria-hidden="true"></span>
    Download
</a>

Answer 3

Adding to danielnixon answer (+1): if I want to use a fontawesome icon as a decorative thing in the UI (not a link, button, etc), I add a span with a wai-aria attribute:

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

Answer 4

It very much depends on what the content is inside the i tag is semantically. WCAG2.0 is a set of guidelines, not hard and fast rules.

According to the HTML5 spec:

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.

From: http://www.w3.org/html/wg/drafts/html/master/text-level-semantics.html#the-i-element

If the content is something that needs to be "emphasises" then, no use the em tag as that is semantically correct across all user agents. The example on the spec, with a Latin technical name for an animal, is a perfect example of something that would be italicized, but not emphasised (although visually they would look the same).

<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>

Would be styled:

The Felis silvestris catus is cute.

So, if you can justify why the text is "italic", but not emphasised, keep it as is, otherwise change it to a semantically appropriate tag.