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

html css font-awesome wcag2.0
sdvnksv picture sdvnksv · Oct 26, 2016 · Viewed 14.1k times · Source

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

Quentin picture Quentin · Oct 26, 2016

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.

Related questions

Font Awesome not working, icons showing as squares

So I'm trying to prototype a marketing page and I'm using Bootstrap and the new Font Awesome file. The problem is that when I try to use an icon, all that gets rendered on the page is a big square. …

Read More
Add image in title bar

How do I add image in title bar? I have title- "Webnet" Merging it with a FontAwesome Glyphicon's icon images as- <title><i class="icon-user icon-black"></i>Webnet</title> And I tried …

Read More
Use Font Awesome icon as CSS content

I want to use a Font Awesome icon as CSS content, i.e., a:before { content: "<i class='fa...'>...</i>"; } I know I cannot use HTML code in content, so is it only images left?

Read More