1. Home
  2. :
  3. WCAG Guidelines
  4. :
  5. 1.1.1 Non-text content – Level...
  6. :
  7. Are decorative or redundant font...

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


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>