Icon accessibility

For decoration

In most cases, icons are used to provide some extra decoration, visual styling, or branding. It does not need to be announced to screen reader users. To ensure the icon is not read by a screen reader, add the attribute aria-hidden="true" to the icon markup.

Example

<span class="cicon-flag" aria-hidden="true"></span>

For semantics or interactivity

If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies. This goes for content you're abbreviating via icons as well as interactive controls (buttons, form elements, toggles, etc.). There are a few techniques to accomplish this.

Icons used as static elements

The simplest way to provide a text alternative is to use the aria-hidden="true" attribute on the icon and to include the text with an additional element, such as a <span class="sr-only">, with appropriate CSS to visually hide the element while keeping it accessible to assistive technologies. In addition, you can add a title attribute on the icon to provide a tooltip for sighted mouse users.

Example: Icons being used to communicate travel methods

<span class="cicon-car" aria-hidden="true" title="Time to destination by car"></span>
<span class="sr-only">Time to destination by car:</span>
<span class="text">4 minutes</span>

<span class="cicon-bicycle" aria-hidden="true" title="Time to destination by bike"></span>
<span class="sr-only">Time to destination by bike:</span>
<span class="text">12 minutes</span>

Example: An icon being used to denote the time remaining

Icons used for interactive elements

In the case of focusable interactive elements, there are various options to include an alternative text or label to the element, without the need for any visually hidden <span>s or similar. For instance, simply adding the aria-label attribute with a text description of the interactive element will be sufficient for providing accessible text descriptors for the element.

Example: An icon being used to communicate the shopping cart

<a class="cui {{ btn-sm | btn-md | btn-lg }} primary" aria-label="{{ text (for screen readers) }}>
    <span class="{{ Icon class (e.g. cicon-shopping-cart) }}" aria-hidden="true"></span>
</a>