Accessibility Weekly

Font Awesome and Icon Fonts Accessibility

Published:

amber-200

Amber Hinds

Equalize Digital

Amber Hinds is the CEO of Equalize Digital, Inc., a Certified B Corp specializing in WordPress accessibility, maker of the Accessibility Checker plugin, and lead organizer of the WordPress Accessibility Meetup and WP Accessibility Day conference.

Week 8

Imagine this scenario: you found an excellent resource for your next article. You want to thank the author and tag them when you share it, so you look for their Twitter account. You find the Twitter logo at the bottom right corner of their website. You click on it and are immediately redirected to their Twitter. Easy enough.

But what if you were using a screen reader? Would you still get the same experience? Probably not.

Why Icon Font Accessibility Matters

Linked icons, often created with icon fonts such as Font Awesome, are commonly used in user interfaces for websites and mobile applications. Icons are used to represent various functionalities, such as navigation controls, social media links, search bars, and menu items. Icon fonts can also used for indicating status or providing visual feedback to users, such as warning signs or confirmation symbols.

Because icons have the potential to communicate a wide range of important information, it's crucial that they are accessible to as many people as possible and can be understood when using a screen reader or other assistive technology.

Icons are utilized in two ways across websites, apps, and other digital interfaces, and how they are handled from an accessibility standpoint depends on how that icon is used – whether it’s decorative or functional in a link or button.

Decorative Icon Accessibility

If you're utilizing an icon for decorative or branding purposes, there's no need to notify screen reader users that the icon is there. Here are examples of how an icon might be used that is considered decorative:

  • A three-column section on the home page that contains an icon, page title, and blurb linked to other pages on the site.
  • An arrow pointing to the right next to a “Read More” link.
  • Icons added as a background images behind or near text.

If the icon is used to highlight or style content already present in your HTML visually, it doesn't need to be reiterated for users relying on assistive technology.

When an icon is added to the website purely for decorative purposes, it should be concealed from screen readers so that they will skip the icon and not read it out. No needs to hear “Read more about us. Graphic. Right pointing arrow,” for example. It’s unnecessary clutter that distracts from the point of the content.

If you have decorative icons on your site, the best way to make them accessible is to hide them from screen readers completely with aria-hidden=”true”. Here is an example:

<a href="/about">Read more about us <i aria-hidden="true" class="fas fa-arrow-right"></i></a>

Icons on Buttons or Links

If you're using an icon on a button or link, it’s crucial to ensure the purpose of that button or link is communicated to users through text-based alternatives. This applies to abbreviated content (such as shopping cart status or a number of unread messages) and interactive controls (such as buttons, form elements, and toggles).

In our website audits, failure to provide an accessible label is one of the most common problems that we find, especially when an icon font is being used. Going back to the example we opened this article with, here’s an example of an inaccessible (I.e., bad) linked icon:

<a href="<https://twitter.com/heyamberhinds>"><i class="fab fa-twitter"></i></a>

A sighted person would see this as a link to Twitter but if a screen reader encountered this it would just read out “Link” with no additional information. In Equalize Digital Accessibility Checker, you would see this flagged as an Empty Link Error.

There are two ways to fix this.

Add Screen Reader Text to Icon Fonts

You can add hidden screen reader text before or after the link to add context for screen readers only.

<a href="<https://twitter.com/heyamberhinds>"><i class="fab fa-twitter"></i><span class=”screen-reader-only”>Amber’s Twitter Profile</span></a>

Use an ARIA Label

You can add an aria-label to the link to add context for screen readers only.

<a href="[<https://twitter.com/heyamberhinds>](<https://twitter.com/heyamberhinds>)" aria-label=”Amber’s Twitter Profile”><i class="fab fa-twitter"></i></a>

Additional Resources for Accessible Icon Fonts

Here are some additional resources for reading more about accessibility in icon fonts.

Join the Conversation!

There's a dedicated thread on this post inside of The Admin Bar community. Join in on the conversation, ask questions, and learn more!

Group Thread
amber-200

Amber Hinds

Equalize Digital

Amber Hinds is the CEO of Equalize Digital, Inc., a Certified B Corp specializing in WordPress accessibility, maker of the Accessibility Checker plugin, and lead organizer of the WordPress Accessibility Meetup and WP Accessibility Day conference.

Through her work at Equalize Digital, Amber is striving to create a world where all people have equal access to information and tools on the internet, regardless of ability. Since 2010, she has led teams building websites and web applications for nonprofits, K-12 and higher education institutions, government agencies, and businesses of all sizes. Through this journey, she learned about the importance of making websites accessible to everyone, and it has been her passion to bring awareness to accessibility and make website accessibility easier, ever since. 

Brought to you by:

Make your WordPress website accessible and ensure all people have equal access to your products or services, regardless of ability. Reach more customers, reduce liability, and increase conversions.

Come Join Us!

Join the #1 WordPress Community and dive into conversations covering every aspect of running an agency!

Kyle Van Deusen

Community Manager

More from Accessibility Weekly

Week 51

How Accessible is “Accessible Enough”

In an ideal world where clients have unlimited budgets and everything is custom, every website would …

Week 50

How to Sell Accessibility in New Builds

Creating websites that prioritize accessibility is no longer just a best practice—it’s a business must, especially …

Week 49

Accessibility in Web Development Contracts

Whether you’re running an agency or freelancing, having a clear contract for your web development and …