Examples

✓ Good example

In this example, the convention of a house shape is used to denote a link to the site’s home page.

  <a href="#" class="icon-home"> <span class="visually-hidden">home</span></a>

We need to make sure this information is also available to screen-reader users. The visually-hidden class is used to hide the text “home” from sighted users but make it available to screen readers. Screen readers will therefore read “link home.” The CSS to achieve this is:

.visually-hidden {
  border: 0; 
  clip: rect(0 0 0 0); 
  height: 1px; 
  margin: -1px; 
  overflow: hidden; 
  padding: 0; 
  position: absolute; 
  width: 1px;
}

✓ Bad example

If we used display: none to hide the “home” text visually, it would also become hidden from screen readers, so those users would have no description for the link.

.visually-hidden {
  display: none; /* don't use this */
}

✓ Good example

In this example, we use a different method to provide an accessible label for the link: the aria-label attribute.

<a href="#" class="icon-home" aria-label="home"></a>

Note that if the icon was placed inside the link (rather than added as pseudo-content), the aria-label value would helpfully override that character.

Video: Accessible icon font links in NVDA with Firefox

Code editor

A code editor is available to explore and test three acceptable methods for employing icon fonts accessibly.

Examples

✗ Bad example

Omitting an alt attribute provides no information to screen-reader users.

    <img src="path/to/image.jpg">
  

✓ Good example: providing an alt attribute

Supply alternative text through the alt attribute. The alternative text should provide information equivalent to what’s conveyed in the image:

<img src="path/to/image.jpg" alt="Your alternative text.">

✓ “Null” example

Some images are purely decorative and have no useful information to convey non-visually. In these cases, you should use an empty or “null” alt attribute, as demonstrated below:

    <img src="path/to/image.jpg" alt="">
  

Video: Alternative text with VoiceOver and Safari

Code editor