6.3. Managing alternative text on Icon Fonts

Note

Whether the icon is decorative, informative, or acts as a link/button, the container tag should be given aria-hidden="true" to ensure that screen readers do not present this information to the user as they encounter it.

If possible, the tag serving the icon should be a <span> because it has no semantic value.

Decorative/ambient icons

When a decorative or ambient icon is included in the HTML code there is no need for an alternative.

In the following HTML code, the icon is simply a visual embellishment of the text “Error messages” (which is explicit by nature):

<h2>
   <span class="icon error" aria-hidden="true"></span>
   Error messages
</h2>

Informative icons

When an informative icon is included in the HTML code:

  1. Add a tag (i.e. <span>) immediately after the tag which contains the icon.
  2. Add information to this tag to make the icon explicit.
  3. Hide the content of the tag with CSS by placing it off-screen (outside the viewport) using the CSS “position: absolute;” property.

In the example of HTML code below, the icon refers to the time and distance to reach a destination by walking:

<p>
  <span class="icon walking" aria-hidden="true"></span>
  <span class="off-screen">By walking: </span>
  <span>2 min</span>
  <span>111 m</span>
</p>
.off-screen {
   position: absolute;
   left: -99999rem;
}

Link or button icons

When an unlabelled icon acting as a link or button is added to the HTML code:

  1. Add a <span> tag inside the <a> or <button> tag.
  2. Add text to the <span> tag to make the link or button explicit.
  3. Hide the content of the tag with CSS by placing it off-screen using the CSS “position: absolute;” property.

In the example of HTML code below, the icon is a link that points to the homepage:

<a href="/">
   <span class="icon home" aria-hidden="true"></span>
   <span class="off-screen">Home</span>
</a>
.off-screen {
   position: absolute;
   left: -99999rem;
}

Find out more

Comments

Add a comment

All fields are mandatory.

Back to top