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

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 2

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