[Accessibility] Points to Consider When Adding aria-label to Icon Font Elements

Premise of Icon Fonts

The following is an example of defining Font Awesome:

.fab {
  font-family: "Font Awesome 5 Brands";
}

.fa-twitter::before {
  content: "\f099";
}

<span class="fab fa-twitter"></span>

Icon fonts render icons by placing character glyphs corresponding to the icons in pseudo-elements.

Purpose of Accessibility

Similar to the alt attribute of <img>, alternative text can be described using aria-label, allowing screen readers to convey appropriate meaning.

Implementation

Decorative Icons

For decorative icons that do not need to be read by screen readers, add aria-hidden="true".

<span class="fab fa-twitter" aria-hidden="true"></span>

Meaningful Icons

For icons that need a description for screen readers, add aria-label.

<span class="fab fa-twitter" aria-label="Twitter"></span>

Icons Accompanied by Text

If there is meaningful text alongside the icon, having aria-label can cause screen readers to read it twice. In such cases, add aria-hidden="true" as shown below.

<a href="https://twitter.com/">
  <span class="fab fa-twitter" aria-hidden="true"></span>
  Twitter
</a>

Related

• [Accessibility] Points to Consider When Adding Alternative Text (alt) to Images