DEV Community

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

Posted on

4 1

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 :)

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more