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
<span> tag if standalone, or the
<button> tag if part of a link or button) has an
Note that because it’s hidden, it should not have an
How to test
- Right-click the icon and check to see if it has an
- Check to see if it has an
aria-labelledbyattribute. If it does, this is a failed test.
<a class="fonticon_anchor> <span class="icon-pencil-1" aria-hidden="true"></span> Edit Description</a>