How to make an HTML link displayed as an icon accessible?

Question

I have some links that are displayed only as icons (don't have any text):

<a href="..." class="icon-link"></a>

.icon-link {
  background-image: url(...);
}

How do I make this link accessible for people not accessing the website visually (using screen readers)?

I see few approaches possible, but cannot find any resources on which one is actually right, or best supported:

• Adding aria-label attribute on <a>
• Adding title attribute on <a>
• Adding text inside <a> and then hiding it visually with CSS

Answer 1

Short Answer

Use visually hidden text.

Longer answer

Adding a title offers very little in the way of accessibility. Here is an interesting article on the subject, it links out to further information.

So with that in mind that leaves option 1 and 3 as viable options, however the best compatibility is using visually hidden text.

You see support for aria-label is surprisingly low (scroll down the page to the aria-label section), whereas visually hidden text using the example below will cover browsers all the way back to IE6!

I answered about the most robust way to do visually hidden text (with explanations of why I do each item) in this stack overflow answer. I have copied the same below just for your reference.

For your use case just add a span within the link with the visually-hidden class.

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<p>visible text <span class="visually-hidden">hidden text</span></p>

Added Bonus of visually hidden text

As @QuentinC pointed out in the comments there is another great reason to use visually hidden text over the other methods.

If a user uses a browser that does not support CSS (there are still a few text only browsers that people use) then the text will be displayed.

Answer 2

Always reconsider using visually hidden text. Not because it is bad, but because it leads to false belief that the solution is accessible for everyone when it's only accessible to a small subset of the population.

Using hidden text won't help people not using screenreaders to know the action performed by the link when meaning of the image might be difficult. Screenreader users are a small part of the population targetted by accessibility rules.

Regarding the title attribute, it won't hurt anyone to improve accessibility if you inform standard mouse users of the action performed by the link. It will help them. If a title attribute is not always recommended, you might opt for any solution that would show the text when the element is focused with the mouse or with the keyboard.

You also must remember that not showing text will not help people using voice navigation or eye tracking device.

When using the title attribute, you must always consider using it conjointly with the aria-label attribute, and not replacing one with the other.

---

EDIT: simple example

.icon-link {
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='50px' width='120px'><text x='0' y='20' font-size='20'></text></svg>");
  content: '';
  background-repeat: no-repeat;
  width: 20px;
  height: 30px;
  display: inline-block; 
}

#pizza {
  position: absolute;
  display:none;
  background:white;
  color: black;
  margin-left: 20px;
}

a:focus #pizza, a:hover #pizza {
  display: block;
}

<a href="#" class="icon-link" aria-labelledby="pizza"><div id="pizza">Pizza!</div></a>