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 Hinds
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.
