Are decorative or redundant font icons marked with aria-hidden=”true”?

Goal

Ensure that unnecessary font icons don’t distract screen reader users.

Why this matters

Font icons don’t have a “load as background CSS” option — they’re always in the browser’s HTML. If they’re marked with the aria-hidden="true" attribute, the screen reader will ignore them, which is what we want when the icon is decorative or redundant.

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 an aria-hidden=”true” attribute.

Note that because it’s hidden, it should not have an aria-label="..." attribute.

How to test

1. Right-click the icon and check to see if it has an aria-hidden=”true” attribute.
2. Check to see if it has an aria-label or aria-labelledby attribute. If it does, this is a failed test.

Example code:

<a class="fonticon_anchor>
  <span class="icon-pencil-1" 
   aria-hidden="true"></span> Edit Description</a>