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.

And run this through the

Answer 1

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

The Felis silvestris catus is cute.

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.