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. Visually hide the content of this tag while keeping it available to screen readers using CSS (see code example below).

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 {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

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. Visually hide the content of this tag while keeping it available to screen readers using CSS (see code example below).

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 {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

Comments

Updates

Back to top