How to make Font Awesome icons accessible

How to make Font Awesome icons accessible

Remi Gathoni's photo
Remi Gathoni
·

1 min read

I have been learning about web accessibility and recently had to use some Font Awesome icons in my code.

Here is how to go about making the icons accessible.

The first question to ask yourself is whether the icon is purely decorative or adds meaning to your content

Purely Decorative Icons

Add the aria-hidden attribute to each icon.

<i class="fas fa-envelope" aria-hidden="true"></i>

Icons with Meaning

Add the aria-hidden attribute to each icon. Add an alternative text that explains the icon.

<i aria-hidden="true" class="fas fa-map-marker-alt"></i>
<span class="sr-only">Company offices location</span>
<span>Nairobi, Kenya</span>

Then hide the alternative text except to screen readers.

.sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

Learn more about hiding content.

Interactivity Icons

For interactive icons, simply add aria-label attribute to include the alternative text

<a href="http://twitter.com/remigathoni" aria-label="Twitter account for Remi Gathoni">
  <i aria-hidden="true" class="fab fa-twitter"></i>
</a>

I hope this helps you :)

a11yWeb Accessibility