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.
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
<span> tag if standalone, or the
<button> tag if part of a link or button) has a
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
- Right-click the icon and check to see if it has a
- Check to see if it has an
aria-labelledbyattribute and that it’s populated.
- Confirm that the label matches the Writer’s expectations.
<a class="fonticon_anchor icon-pencil-1" role="image" aria-label="edit">Edit Description</a>