A guide to creating accessible icons

In this guide, we'll share tips for designing accessible icons that are are user-friendly for everyone, including visually impaired and screen reader users.

What is an accessible icon #

An accessible icon is designed to be easily understood by everyone, including people with disabilities. These icons are not only visually clear but also recognizable to assistive technologies like screen readers.

This kind of icon helps make sure that everyone, regardless of their ability, can understand what it means or what it is used for.

Icon accessibility for Screen Readers #

Screen readers are essential tools for many users with visual impairments; they are used to read aloud the content displayed on a screen.

Making icons accessible to screen reader users involves providing text that describes each icon's function and purpose. The way this description is provided varies based on the icon's implementation in the website.

Case 1: Icon as an <svg> element

When using an inline SVG icon or an SVG <symbol>, the <title> tag can be used to provide a screen reader-friendly description.

<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">

<title>Icon of an apple</title>

<g stroke-width="1.5" fill="none" stroke="#212121">
  <!-- icon content here -->
</g>
</svg>

Case 2: Icon as an <img> element

For icons used as <img> element, the alt attribute should carry the descriptive text.

<img src="apple.svg" alt="Image of an apple">

Case 3: Icon as icon font

With icon fonts, use the title attribute for describing the icon.

<i class="icon icon-heart" title="Icon of an apple"></i>

Meaningful vs. Decorative Icons

Not all icons should be announced to screen readers.

Icons can be meaningful or decorative. Meaningful icons convey information or actions, like a magnifying glass used for searching. Decorative icons, on the other hand, are purely aesthetic.

Below is an example of how decorative and meaningful icons are used in the Nucleo interface:

While meaningful icons should always be properly announced to screen readers, decorative icons should be hidden.

To hide an icon to screen readers, use the aria-hidden attribute:

<!-- inline SVG icon -->
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">

  <g stroke-width="1.5" fill="none" stroke="#212121">
    <!-- icon content here -->
  </g>
</svg>

<!-- icon font -->
<i aria-hidden="true" class="icon icon-heart"></i>

Icon accessibility for keyboard users #

Always make sure icons are accessible to users that navigate your website using the keyboard.

This is typically achieved using semantic HTML elements. For example, a call-to-action icon should be wrapped in a <button> element for keyboard accessibility:

<!-- button elements are automatically accessible to keyboard users and can be clicked-->
<button>
  <svg>
    <title>Go to checkout</title>
    
    <!-- icon content here -->
  </svg>
</button>

<!-- ❌ this won't be accessible to keyboard users -->
<span>
  <svg>
    <title>Go to checkout</title>
    
    <!-- icon content here -->
  </svg>
</span>

Additional best practices for inclusive design #

• Icon size: clickable icons, such as call-to-action buttons, should be sufficiently large for easy interaction on all devices.
• Icon color contrast: there should be a significant contrast between the icon's color and its background to ensure visibility for users with limited vision. You can read more about color contrast levels on the Web Content Accessibility Guidelines

The end! Check our documentation tutorials page for more articles on working with icons.