Are meaningful font icons marked with a role of image and an ARIA label?

Goal

Ensure that font icons identify themselves as images for screen reader users and other scenarios.

Why this matters

Font icons are glyphs built into fonts. To the browser, they look like letters, not images. They load very quickly and are easy to make repeatable. They also have no accessibility out of the box, and the user has no way to tell what is being conveyed via a screen reader. In most cases the screen readers skip reading them but in some cases they may read out a different letter, which can be very confusing.

True story: I was at a company once when the font file stopped loading for customers and as a result, all the font icons were loading as Chinese characters. A customer called up and asked “Why is my inbox labeled with the symbol for fish?”

When role="img" is attached to font icons, screen readers can list the icon on the list of all images on the page. Screen reader users can navigate to the icon when navigating through graphics.

How to implement

Ensure the font icon’s parent element (often an <i> or <span> tag if standalone, or the <a> or <button> tag if part of a link or button) has a role=”image” attribute.

Ensure the element the font icon styling is attached to has an aria-label="..." attribute with the appropriate label content. (Work with your Writer for content.) You can also use the aria-labelledby="[id of label]" if a nearby element has the label text within it.

How to test

1. Right-click the icon and check to see if it has a role=”image” attribute.
2. Check to see if it has an aria-label or aria-labelledby attribute and that it’s populated.
3. Confirm that the label matches the Writer’s expectations.

Example code:

<a class="fonticon_anchor icon-pencil-1" role="image" aria-label="edit">Edit Description</a>