6.1. Provide replacement 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 and 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 or place it off-screen using the CSS “opacity: 0;” or “position: absolute;” properties.

The icon image above refers to the time and distance to reach a destination by walking. The code should be:

<p>
  <span class="icon walking" title="By 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;
}

Tip

Good practice is to add a title attribute, containing the replacement text value, inside the tag used to display the icon (so that the text appears when mousing over).

Unlabeled icon links or buttons

When an unlabeled icon acting as a link or button is added into the HTML code:

  1. Add a <span> tag inside the <a> or <button> element.
  2. Add text into the <span> to make the icon explicit.
  3. Hide the content of this tag with CSS or place it off-screen using the CSS “opacity: 0;” or “position: absolute;” properties.

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

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

Tip

Good practice is to add a title attribute, containing the replacement text value, inside the tag used to display the icon (so that the text appears when mousing over).

Find out more

Comments

Add a comment

Required fields are marked *.

Back to top