6.3. Managing alternative text on icon inserted via CSS

• Decorative/ambient icons.
• Informative icons.
• Link or button icons.

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

Updates

Back to top