DEV Community

hiro
hiro

Posted on • Originally published at b.0218.jp

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

#a11y #html

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";
}
Enter fullscreen mode Exit fullscreen mode 
<span class="fab fa-twitter"></span>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Meaningful Icons

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

<span class="fab fa-twitter" aria-label="Twitter"></span>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Related

Top comments (0)