Deka87 Deka87 - 1 year ago 75
CSS Question

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

I am testing my HTML code markup compliance with accessibility standards: 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 (, and didn't find any mention of that I need to use different tags for icons. Any ideas on this?

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download