16

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?

sdvnksv
  • 7,974
  • 10
  • 41
  • 85
  • 3
    Since there is no readable text involved the `i` can safely be used. – Paulie_D Oct 26 '16 at 14:19
  • ...but if you are *really* concerned...use a `span` instead. – Paulie_D Oct 26 '16 at 14:24
  • 1
    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i – Paulie_D Oct 26 '16 at 14:25
  • @Paulie_D, thanks. I think I will replace them with spans just in case. – sdvnksv Oct 26 '16 at 14:36
  • 5
    Font Awesome's [documentation](https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use): _Font Awesome is designed to be used with inline elements and we recommend sticking with a consistent HTML element to reference them by in your project. We like the_ `` _tag for brevity and for the fact that most folks are using_ `` _for emphasized/italicized semantic text these days. If that’s not your cup of tea, using a_ `` _is more semantically correct._ – Voicu Sep 27 '18 at 18:33

4 Answers4

24

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.

Quentin
  • 800,325
  • 104
  • 1,079
  • 1,205
  • Thanks, it makes sense. – sdvnksv Oct 26 '16 at 14:35
  • 1
    @sdvnskv it seems this conventional wisdom is no longer true. "In earlier versions of the HTML specification, the element was merely a presentational element used to display text in italics, much like the element was used to display text in bold letters. This is no longer true, as these tags now define semantics rather than typographic appearance." - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i – Jeromy French May 08 '20 at 00:56
  • @JeromyFrench — The semantics given to `i` elements are still nonsense for this use case. – Quentin Nov 04 '20 at 10:49
6

On a strict and semantic HTML, font icons have to be tagged with spans:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<span class="fa fa-camera-retro"></span>

Font Awesome examples appears with <i> (italic tags) because of abbreviation coding. Just it.

Miquel Al. Vicens
  • 336
  • 2
  • 14
3

I know it's a 2016 answer... you may use aria-hidden="true" on your tag, like this: <i class="fa fa-search" aria-hidden="true"></i>, tho.

That's explained on: https://rules.sonarsource.com/html/RSPEC-1100 and https://www.w3.org/WAI/GL/wiki/Using_aria-hidden%3Dtrue_on_an_icon_font_that_AT_should_ignore

Lincoln Stuart Lima da Gama
  • 31
  • 1
1

The <em> element represents stress emphasis of its contents.

If you’re not stressing emphasis on a particular word, then you should use <i>.

The <i> element is more appropriately used for presentation purpose.

You could use <i> to mark up a quotation – not to add emphasis to the entire phrase or paragraph, but to differentiate it or offset it from the main text.

http://www.silkstream.net/blog/2016/02/b-vs-strong-i-vs-em-whats-the-difference.html

In your instance, it may suggest using <em> because some specialized accessibility software's may handle them with more emphasis.

Herbs
  • 127
  • 2
  • 8
  • 1
    *You could use `` to mark up a quotation* — You shouldn't though. We have [the `` element](https://www.w3.org/TR/html5/text-level-semantics.html#the-q-element). – Quentin Oct 26 '16 at 14:30