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

First, 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 as inappropriate.

Second, changing

to

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 tag. Something like this (using Bootstrap's sr-only CSS class):

    
    Download

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

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

    
    Download