DEV Community

Cover image for How to make Font Awesome icons more accessible
Mary Gathoni
Mary Gathoni

Posted on

How to make Font Awesome icons more accessible

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

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

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

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

I hope this helps you :)

Discussion (0)