✎ Technique: Icon fonts

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.