Alt or title attribute for i tag

Question

I use font-awesome and display their fonts like that:

This will display a nice little lock symbol. For

Answer 1

<i> tags are for marking up text. You are changing the semantic meaning of this tag to something that has nothing to do using italics (and even the italic tag is a bad idea). You should be using a SPAN instead.

Italic elements do not support alt attributes, IMG elements do. If you want an ALT attribute, use an image.

Answer 2

With the advance of WAI-ARIA, when using font icons, you probably should use a combination of the following to improve accessibility:

• The role presentation to remove implicit native role semantics of the element. This is especially important if you (ab)use an element with a native semantic to provide icons, as this is the case in your example using the i element (which, according to the specs, "represents a span of text in an alternate voice or mood [...]").
• An aria-label to provide a string value that labels the element -or- a native HTML title attribute if you are OK with the browser displaying a tooltip when hovered.
• An aria-hidden attribute to hide generated content from assistive technologies (as you are using an icon font family, there is a generated character :before of :after). According to the specs:

Authors MAY, with caution, use aria-hidden to hide visibly rendered content from assistive technologies only if the act of hiding this content is intended to improve the experience for users of assistive technologies by removing redundant or extraneous content. Authors using aria-hidden to hide visible content from screen readers MUST ensure that identical or equivalent meaning and functionality is exposed to assistive technologies.

---

I don't know your exact use case, so I take the liberty to use the simpler case of providing a phone number. In decreasing order of preference, I would use:

<span aria-label="Our phone number">
  <span class="icon-phone" aria-hidden="true"></span>
  +33 7 1234576
</span>

(or any variation implying:
  - an `i` element with a `role` presentation attribute
    instead of the inner `span` element
  - a `title` attribute instead of an `aria-label` attribute)

<span class="icon-phone" 
  aria-label="Our phone number">+33 7 1234576</span>

(or any variation using `title` instead of `aria-label`)

<i class="icon-phone" role="presentation" 
  aria-label="Our phone number">+33 7 1234576</i>

(or any variation using `title` instead of `aria-label`)

Please note that aria-label and title attributes should describe the content of the element. Not the next sibling element. So I feel like the following solution is not in accordance with the specs (even if most accessibility tools would actually have the same observable behavior as if the phone number were actually inside the span element) :

<span class="icon-phone" 
  title="Our phone number"></span>+33 7 1234576

Answer 3

You can use the title attribute on an i element, like any element, e.g.

<i class="icon-lock" title="This symbolizes your being locked inside"></i>

Whether it helps is a more difficult issue. Browsers usually show the title attribute value as a “tooltip” on mouseover, but why would the user mouse over the icon? And such tooltips are of poor usability; so-called CSS tooltips often work better.

Screen readers may give the user optional access to title attributes, but I’m not sure what they do with elements with empty content.

Answer 4

You should use <span> or something along those lines instead. You can use the title="" attribute to give some text on hover, if that's what you're looking for. As far as providing accessability to screen readers, or SEO value, you could add the following CSS:

.icon-lock{
    text-indent:-99999px;
}

And then write your markup like so:

<span class="icon-lock">What I want the screen reader to say</span>

Answer 5

I think the role for fonts that act like images should be reserved to role="img". This can then be used with aria-label="alt-text". It works because of the ARIA Accessible Name algorithm. See: Aria Techniques Using Img Role.