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.