Adding alternative text to an icon

Question

I'm trying to make my site more accessible for disabled users, and I've been researching how to add alternative text to icons. I'm using Font Awesome icons and the icons are acting as a link, and the docs suggested I add a title link to the anchor tag around it like so:

<a href="path/to/shopping/cart" title="View 3 items in your shopping cart">
  <i class="fa fa-shopping-cart" aria-hidden="true"></i>
</a>

However, it doesn't seem to work with the Apple's VoiceOver. It's still just reading out "Visiting Link [?]". Does anyone have any experience with this?

Thanks!

Related: [HTML Accessibility, are empty elements allowed?](http://stackoverflow.com/q/32812349/1591669) — unor, Jul 15 '16 at 19:57

score 6 · Answer 1 · answered Jul 15 '16 at 21:43

You have to use the title attribute conjointly with the aria-label attribute.

The title attribute is not always read by assisting technologies but the aria-label should be.

Unfortunately using the aria-label alone won't be of any help to people not using a screen reader and the title attribute will give them a clue.

score 1 · Answer 2 · answered Jul 18 '16 at 08:02

There are two ways you can add some content in here.

The first is to use an img element with an appropriate alt attribute value, e.g.

<a href="path/to/shopping/cart" >
    <img src="url/source.jpg" alt="View 3 items in your shopping card" />
</a>

A second method would be to add some text into the i element and visibly hiding it:

<a href="path/to/shopping/cart">
    <i class="fa fa-shopping-cart" aria-hidden="true">
      <span class="sr-only">
         View 3 items in your shopping cart
      </span>
    </i>
</a>

Add the .sr-only class to your stylesheet:

.sr-only {
  height: 1px;
  width: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  position: absolute;
}

This second method will allow for longer strings of text, if needed. It also prevents a quirk on some browsers (Firefox, from memory) where if text is aligned off-screen and is part of a link, a user tabbing to the link sees focus extended to where the text is, which leads to a very long, thin box on screen.

.sr-only works by making the content a small 1px box that's then clipped out, and for robustness is positioned absolutely on the page. It's supported by all modern browsers and only needs one extra clip rule for older versions of IE that don't like the standard syntax (clip: rect(1px 1px 1px 1px)). More information can be found on Yahoo's developer blog.

As for which to go for it's a matter of personal preference. I would go for the .sr-only to add meaningful text to the page if using an icon set. If you want to use the img element you need to make sure that when the content's updated the content author writes something meaningful rather than describing what the image looks like.

score 0 · Answer 3 · answered Jul 14 '16 at 17:52

0

If the icon is content (which is must be if it is conveying information and you don't have other text already conveying that information) then the element to use to represent it is not the italic element, but the <img> element, which supports the alt attribute.

answered Jul 14 '16 at 17:52

Quentin

914,110
126
1,211
1,335

So I should replace i with img? – user3781239 Jul 14 '16 at 17:56

score 0 · Answer 4 · answered Jul 14 '16 at 21:00

Using the aria-label attribute is likely what you are looking for.

<a href="path/to/shopping/cart" aria-label="View 3 items in your shopping cart">
    <i class="fa fa-shopping-cart" aria-hidden="true"></i>
</a>

I'd also recommend these 2 articles for further understanding why the title attribute is widely misunderstood and why it isn't behaving the way you're led to believe it will.

http://mrwweb.com/the-title-attribute-and-why-its-almost-useless/

https://devbook.com/title-attribute-truth/

Adding alternative text to an icon

4 Answers4