Deka87 Deka87 - 1 month ago 12
CSS Question

Font Awesome accessibility issue. Use <em> tags instead of <i>

I am testing my HTML code markup compliance with accessibility standards: http://achecker.ca/checker/index.php. The following is an error I get:


Repair: Replace your i elements with em or strong.


<i class="fa fa-search" title="Search"></i> <span class="sr-only">Search</span>


I went through the official Font Awesome docs on the accessibility (https://cdn.fontawesome.com/help#qa-autoa11y), and didn't find any mention of that I need to use different tags for icons. Any ideas on this?

Answer

As a general guideline, you should use em for emphasis instead of i for italic text because italic text is normally used only to imply emphasis.

In this case, you are using i for icon, which is nonsense (and confusing your accessibility checking tool). Use a span instead. That doesn't come loaded with any inappropriate semantics.