Skip to content
Font Awesome Docs

Accessibility

Icons can convey all sorts of meaningful information, so it’s important that they reach the largest amount of people possible.

Font Awesome Icons and Accessibility

There are a good number of folks with sight and hearing impairments: blindness, low vision, and visual impairment represent almost 10% of the total world population and disabling hearing loss represents over 5% of the total world population.

So it’s important to make sure that the technology supporting impairments, like screen readers, either ignore or better understand the icons you’re using on the web.

There are two ways that icons are used on websites, apps, and other digital places…

Icon UseWhat to Do
Decorative ElementsIf you’re using an icon to add some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally.

Additionally, if you’re using an icon to visually re-emphasize or add styling to content already present in your HTML, it does not need to be repeated to an assistive technology-using user.

In these cases, the icon should be hidden from the screenreader so it doesn’t interfere with the established meaning.
Semantic ElementsWhen you’re using an icon to convey meaning, you need to make sure that this meaning is also conveyed to users by providing text-based alternatives.

This goes for content you’re abbreviating via icons (e.g. shopping cart status, number of unread messages, etc.) as well as interactive controls (e.g. buttons, form elements, toggles, etc.).

Making Icons Accessible with Auto-Accessibility

The easiest way to support accessible icons is by using the Auto-Accessibility feature included in Font Awesome’s web software. Here’s how it works…

Icons Used as Decorative Elements

Auto-Accessibility will make sure the decorative icon is ignored by assistive technology. There’s nothing extra you need to do on top of how you would usually reference an icon.

If your markup looks like this:

<button type="submit">
  <span class="fa-solid fa-envelope"></span> Email Us!
</button>

Auto-Accessibility will then automatically hide it from screenreaders by adding the aria-hidden attribute. While the outcome is the same, the rendered code is different for Font Awesome’s Web Fonts or SVG-based software.

<button type="submit">
  <span class="fa-solid fa-envelope" aria-hidden="true"></span> Email Us!
</button>

Icons Used as Semantic Elements

Auto-Accessibility will create alternative text for the semantic icon using the description that you need to set with the title attribute.

So if your markup looks like this (with your title attribute containing appropriate alternative text):

<button type="submit">
  <i class="fa-solid fa-arrow-right" title="Next Page"></i>
</button>

Auto-Accessibility will adjust it so the meaning is conveyed in supporting elements that only screenreaders “see”. Again, while the outcome is the same, Font Awesome’s Web Fonts or SVG-based software renders different code.

<button type="submit">
  <i class="fa-solid fa-arrow-right" title="Submit My Tax Return" aria-hidden="true"></i>
  <span class="sr-only">Submit My Tax Return</span>
</button>

When is Auto-Accessibility available?

Auto-Accessibility feature is included in many of Font Awesome’s web-based software options. Though it is not included in all cases, you can always make your icons accessible manually in those situations.

Implementation MethodIncluded?Enabled by Default?
Angular Component
Kit-hosted SVG + JS
Self-hosted Web Fonts (loaded via CSS)
Bare SVGs

Making Icons Accessible Manually

In the cases where Auto-Accessibility isn’t available or you’d prefer to implement best practices yourself, you can use the following instructions to make your icons as accessible to as many people as possible.

Icons Used as Decorative Elements

If your icons are purely decorative, you’ll need to set 1 or 2 things manually to the icon’s code snippet to make sure screen readers and assistive tech ignore them when reading a page to a person.

Web Fonts ImplementationsSVG Implementations
1. Add an aria-hidden="true" attribute to the icon.1. Add an aria-hidden="true" attribute to the the <svg> element
2. Add a role="img"to the the <svg> element
<!-- Decorative Web Fonts-based Icon -->
<i class="fa-solid fa-camera-retro" aria-hidden="true"></i>

Icons Used as Semantic Elements

If your icons have semantic meaning, you’ll need to manually add a few things so that your icon is appropriately accessible:

Web Fonts ImplementationsSVG Implementations
1. Add an aria-hidden="true" attribute to the icon.1. Add a proper role (role="img") to the the <svg> element.
2. Provide a text alternative inside a <span> (or similar) element that is a sibling to the icon.2. Add a title element with a proper id attribute inside the <svg> element.
3. Include appropriate CSS to visually hide the element while keeping it accessible to assisitive technologies.3. Add an aria-labelledby attribute to the <svg> element and set it’s value to match the id of the newly added title element.
4. Include appropriate CSS to visually hide the element while keeping it accessible to assisitive technologies.
<a href="https://twitter.com/fontawesome">
  <!-- Semantic Web Fonts-based Icon -->
  <i aria-hidden="true" class="fa-brands fa-twitter"></i>
  <span class="fa-sr-only">The Font Awesome teams' Twitter account</span>
</a>

Accessibility-Minded Style Utilities

To help with any manual accessibility efforts, Font Awesome’s web software contains some styling utilities based on best practices. These help visually hide elements while keeping them accessible to assisitive technologies.

ClassDetails
fa-sr-onlyVisually hides an element containing a text-equivalent for an icon while keeping it accessible to assisitive technologies
fa-sr-only-focusableUsed alongside fa-sr-only to show the element again when it’s focused (e.g. by a keyboard-only user)

In the case of focusable interactive elements, there are various options to include an alternative text or label to the element, without the need for any visually hidden <span> or similar. For instance, simply adding the aria-label attribute with a text description to the interactive element itself will be sufficient to provide an accessible alternative name for the element. If you need to provide a visual tooltip on mouseover/focus, we recommend additionally using the title attribute or a custom tooltip solution.

Animating Icons and Accessibility

Font Awesome comes bundled with basic animations in our support styling. These animations now support and leverage the prefers-reduced-motion CSS media feature to detect if a user has requested that the system minimize the amount of non-essential motion it uses.

CaseHow It Affects Included Animations
No preference set (default)Animations will render as expected
Preference set to reduceAnimations will be disabled

When a prefers-reduced-motion is set to reduce, the user prefers less motion on the page to help reduce discomfort from vestibular motion disorders and other motion sensitivities.

Other Cases and Information

While the scenarios and techniques here help avoid some serious issues and confusion, they are not exhaustive.

There are many complex contexts and use cases when it comes to accessibility, such as users with low vision who need a high color contrast ratio to see UI. There are some great tools and resources to learn from and work on these issues out there. Here are a few reads we recommend:

We’ll continue to work on these under the larger topic of accessibility, but in the meantime, let us know if any bugs or issues.

Follow Lee on X/Twitter - Father, Husband, Serial builder creating AI, crypto, games & web tools. We are friends :) AI Will Come To Life!

Check out: eBank.nz (Art Generator) | Netwrck.com (AI Tools) | Text-Generator.io (AI API) | BitBank.nz (Crypto AI) | ReadingTime (Kids Reading) | RewordGame | BigMultiplayerChess | WebFiddle | How.nz | Helix AI Assistant