Alt or title attribute for i tag

Question

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

<i class="icon-lock"></i>

This will display a nice little lock symbol. For the user to know what exactly that means, I tried adding attributes such as title and alt, but to no avail.

Is there any attribute I can use for the <i> tag that executes the same task as alt for images and title for links?

Answer 1

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 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 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>