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 we've built ways to help technology that supports impairments, like screen readers, either ignore or better understand the Font Awesome icons you're using.

Auto-accessibility with Kits

If you're using a Kit, we've handled accessibility for you. If the icon is being used in place of some text, just add some descriptive text in the title attribute - like this: title="[icon meaning]" - to your icon element and we'll make it accessible. Otherwise, if it's just decorative, you don't need to do anything - we'll make sure it doesn't interfere with the content. Learn more

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

Icon Use	What to Do
For Decorative Elements	If 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.
For Semantic or Interactive Purposes	When 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.).

Icon Use

What to Do

For Decorative Elements

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

For Semantic or Interactive Purposes

When 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.).

Auto-Accessibility with Kits

The easiest way to support accessible icons is with a Font Awesome Kit. Every Kit comes with auto-accessibility built-in and provides the modern and proper syntax assistive technologies recognize.

Here's how it works:

For Icons That Are Decorative

Font Awesome auto-accessibility feature will make sure it is ignored by assistive technology. There's nothing extra you need to 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>

The Font Awesome Kit will hide it from screenreaders using the aria-hidden attribute:

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

For Icons That Have Semantic or Interative Meaning

The Font Awesome auto-accessibility feature will create alternative text for the icon using the description you set with the title attribute.

So if your markup looks like this:

<button type="submit">
  <span class="fa-solid fa-arrow-right" title="Submit My Tax Return"></span>
</button>

The Font Awesome Kit will adjust it so the meaning is conveyed in supporting elements that only screenreaders "see":

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

Manually Make Your Icons Accessible

If you are hosting yourself, you can manually set-up accessibility for your icons using the instructions below, for either Web Fonts and CSS, SVG and JS, SVG Sprites .

Accessibility with Web Fonts with CSS

Accessibility for webfonts takes a bit more work, as the Webfont with CSS method can't add any attributes or elements to your HTML, but is well worth the effort. You'll just need to consider whether your icon is just decorative or has semantic meaning.

Decorative Icons

If your icons are purely decorative, you'll need to manually add an aria-hidden attribute to each of your icons so they're accessible.

<i class="fa-solid  fa-camera-retro" aria-hidden="true"></i>

Keep your aim and aria-hidden "true"!

Be sure to include ="true" in the reference - it's important for screen readers to have a value that follows the spec (opens new window).

Semantic Icons

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

aria-hidden="true" attribute.
Provide a text alternative inside a <span> (or similar) element. Also include appropriate CSS to visually hide the element while keeping it accessible to assisitive technologies. Our style toolkit includes a fa-sr-only based on best practices (opens new window) to handle that hiding.
title attribute on the icon to provide a tooltip for sighted mouse users.

<i
  aria-hidden="true"
  class="fa-solid  fa-car"
  title="Time to destination by car"
></i>
<span class="fa-sr-only">Time to destination by car:</span>
<span>4 minutes</span>

Class	Details
`fa-sr-only`	Visually hides an element containing a text-equivalent for an icon while keeping it accessible to assisitive technologies
`fa-sr-only-focusable`	Used 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.

An icon being used to communicate shopping cart state:

<a href="path/to/shopping/cart" aria-label="View 3 items in your shopping cart">
  <i aria-hidden="true" class="fa-solid  fa-shopping-cart"></i>
</a>

An icon being used as a link to a navigation menu:

<a aria-label="Skip to main navigation" href="#navigation-main">
  <i aria-hidden="true" class="fa-solid  fa-bars"></i>
</a>

An icon being used as a delete button's symbol with a title attribute to provide a native mouse tooltip:

<a aria-label="Delete" class="btn btn-danger" href="path/to/settings">
  <i
    aria-hidden="true"
    class="fa-solid fa-trash"
    title="Delete this item?"
  ></i>
</a>

Accessibility with SVG with JavaScript

Semantic Icons

Our SVG+JS method uses the same auto-accessibility feature that is part of Kits. When your icon conveys meaning, we add supporting HTML elements and attributes so that your icons are accessible to the widest audience possible.

When your icon has semantic meaning, all you need to do is throw a title="meaning" attribute. Auto-accessibility takes care of the rest, adding the following:

Proper ARIA role (role="img")
title tag with a proper id attribute, based upon the title attribute given to the icon
aria-labelledby attribute and wire it to the title tag

<!-- Your HTML - Semantic Icons -->
<i title="Magic is included!" class="fa-solid fa-magic"></i>

<!-- After Auto-Accessibility - Semantic Icons -->
<svg
  class="svg-inline--fa fa-magic fa-w-16"
  aria-labelledby="svg-inline--fa-title-mYhtJm58zQKa"
  data-fa-i2svg=""
  data-prefix="fa-solid "
  data-icon="magic"
  role="img"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 512 512"
>
  <title id="svg-inline--fa-title-mYhtJm58zQKa">Magic is included!</title>
  <path
    fill="currentColor"
    d="M101.1 505L7 410.9c-9.4-9.4-9.4-24.6 0-33.9L377 7c9.4-9.4 24.6-9.4 33.9 0l94.1 94.1c9.4 9.4 9.4 24.6 0 33.9L135 505c-9.3 9.3-24.5 9.3-33.9 0zM304 159.2l48.8 48.8 89.9-89.9-48.8-48.8-89.9 89.9zM138.9 39.3l-11.7 23.8-26.2 3.8c-4.7.7-6.6 6.5-3.2 9.8l19 18.5-4.5 26.1c-.8 4.7 4.1 8.3 8.3 6.1L144 115l23.4 12.3c4.2 2.2 9.1-1.4 8.3-6.1l-4.5-26.1 19-18.5c3.4-3.3 1.5-9.1-3.2-9.8L160.8 63l-11.7-23.8c-2-4.1-8.1-4.1-10.2.1zm97.7-20.7l-7.8 15.8-17.5 2.6c-3.1.5-4.4 4.3-2.1 6.5l12.6 12.3-3 17.4c-.5 3.1 2.8 5.5 5.6 4L240 69l15.6 8.2c2.8 1.5 6.1-.9 5.6-4l-3-17.4 12.6-12.3c2.3-2.2 1-6.1-2.1-6.5l-17.5-2.5-7.8-15.8c-1.4-3-5.4-3-6.8-.1zm-192 0l-7.8 15.8L19.3 37c-3.1.5-4.4 4.3-2.1 6.5l12.6 12.3-3 17.4c-.5 3.1 2.8 5.5 5.6 4L48 69l15.6 8.2c2.8 1.5 6.1-.9 5.6-4l-3-17.4 12.6-12.3c2.3-2.2 1-6.1-2.1-6.5l-17.5-2.5-7.8-15.8c-1.4-3-5.4-3-6.8-.1zm416 223.5l-7.8 15.8-17.5 2.5c-3.1.5-4.4 4.3-2.1 6.5l12.6 12.3-3 17.4c-.5 3.1 2.8 5.5 5.6 4l15.6-8.2 15.6 8.2c2.8 1.5 6.1-.9 5.6-4l-3-17.4 12.6-12.3c2.3-2.2 1-6.1-2.1-6.5l-17.5-2.5-7.8-15.8c-1.4-2.8-5.4-2.8-6.8 0z"
  ></path>
</svg>

You can control the id attributes generated by specifying data-fa-title-id. This is useful for some testing frameworks that use snapshots to verify test results.

<!-- Your HTML - Semantic Icons -->
<i
  title="Magic is included!"
  data-fa-title-id="magic"
  class="fa-solid  fa-magic"
></i>

<!-- After Auto-Accessibility - Semantic Icons -->
<svg
  class="svg-inline--fa fa-magic fa-w-16"
  aria-labelledby="svg-inline--fa-title-magic"
  data-fa-i2svg=""
  data-prefix="fa-solid "
  data-icon="magic"
  role="img"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 512 512"
>
  <title id="svg-inline--fa-title-magic">Magic is included!</title>
  <path
    fill="currentColor"
    d="M101.1 505L7 410.9c-9.4-9.4-9.4-24.6 0-33.9L377 7c9.4-9.4 24.6-9.4 33.9 0l94.1 94.1c9.4 9.4 9.4 24.6 0 33.9L135 505c-9.3 9.3-24.5 9.3-33.9 0zM304 159.2l48.8 48.8 89.9-89.9-48.8-48.8-89.9 89.9zM138.9 39.3l-11.7 23.8-26.2 3.8c-4.7.7-6.6 6.5-3.2 9.8l19 18.5-4.5 26.1c-.8 4.7 4.1 8.3 8.3 6.1L144 115l23.4 12.3c4.2 2.2 9.1-1.4 8.3-6.1l-4.5-26.1 19-18.5c3.4-3.3 1.5-9.1-3.2-9.8L160.8 63l-11.7-23.8c-2-4.1-8.1-4.1-10.2.1zm97.7-20.7l-7.8 15.8-17.5 2.6c-3.1.5-4.4 4.3-2.1 6.5l12.6 12.3-3 17.4c-.5 3.1 2.8 5.5 5.6 4L240 69l15.6 8.2c2.8 1.5 6.1-.9 5.6-4l-3-17.4 12.6-12.3c2.3-2.2 1-6.1-2.1-6.5l-17.5-2.5-7.8-15.8c-1.4-3-5.4-3-6.8-.1zm-192 0l-7.8 15.8L19.3 37c-3.1.5-4.4 4.3-2.1 6.5l12.6 12.3-3 17.4c-.5 3.1 2.8 5.5 5.6 4L48 69l15.6 8.2c2.8 1.5 6.1-.9 5.6-4l-3-17.4 12.6-12.3c2.3-2.2 1-6.1-2.1-6.5l-17.5-2.5-7.8-15.8c-1.4-3-5.4-3-6.8-.1zm416 223.5l-7.8 15.8-17.5 2.5c-3.1.5-4.4 4.3-2.1 6.5l12.6 12.3-3 17.4c-.5 3.1 2.8 5.5 5.6 4l15.6-8.2 15.6 8.2c2.8 1.5 6.1-.9 5.6-4l-3-17.4 12.6-12.3c2.3-2.2 1-6.1-2.1-6.5l-17.5-2.5-7.8-15.8c-1.4-2.8-5.4-2.8-6.8 0z"
  ></path>
</svg>

Decorative Icons

If your icons are purely decorative, you're already done! We'll make sure screenreaders don't try to read the icon out.

<!-- Your HTML - Decorative Icons -->
<i class="fa-solid  fa-camera-retro"></i>

Our auto-accessibility automatically adds aria-hidden=true and role="img" to your inline SVG attributes so that your icons are properly accessible.

<!-- After Auto-Accessibility - Decorative Icons -->
<svg
  class="svg-inline--fa fa-camera-retro fa-w-16"
  aria-hidden="true"
  data-fa-i2svg=""
  data-prefix="fa-solid "
  data-icon="camera-retro"
  role="img"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 512 512"
>
  <path
    fill="currentColor"
    d="M48 32C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48H48zm0 32h106c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H38c-3.3 0-6-2.7-6-6V80c0-8.8 7.2-16 16-16zm426 96H38c-3.3 0-6-2.7-6-6v-36c0-3.3 2.7-6 6-6h138l30.2-45.3c1.1-1.7 3-2.7 5-2.7H464c8.8 0 16 7.2 16 16v74c0 3.3-2.7 6-6 6zM256 424c-66.2 0-120-53.8-120-120s53.8-120 120-120 120 53.8 120 120-53.8 120-120 120zm0-208c-48.5 0-88 39.5-88 88s39.5 88 88 88 88-39.5 88-88-39.5-88-88-88zm-48 104c-8.8 0-16-7.2-16-16 0-35.3 28.7-64 64-64 8.8 0 16 7.2 16 16s-7.2 16-16 16c-17.6 0-32 14.4-32 32 0 8.8-7.2 16-16 16z"
  ></path>
</svg>

Accessibility with SVG Sprites

Semantic Icons

SVG Sprites follow most of the same rules as our SVG with JavaScript. However, you will need to add <title>, role, and aria-labelledby yourself.

<!-- Manually add title, role, and aria-labelledby -->
<a href="https://twitter.com/fontawesome">
  <svg aria-labelledby="my-twitter-title" role="img">
    <title id="my-twitter-title">The Font Awesome teams' Twitter account</title>
    <use xlink:href="fa-brands.svg#twitter"></use>
  </svg>
</a>

Decorative Icons

Add aria-hidden and role for decorative sprites.

<!-- Manually add aria-hidden and role -->
<a href="https://twitter.com/fontawesome">
  <svg aria-hidden="true" role="img">
    <use xlink:href="fa-brands.svg#twitter"></use>
  </svg>
</a>

<!-- Using property shorthand -->
<div slot="description">
  You might be tempted to use
  <code class="inline">&lt;svg aria-hidden&gt;</code> and leave the
  <code class="inline">="true"</code> part out. Don't, it's important for screen
  readers to have a value that
  <a
    class="link blue5 hover-blue6"
    href="https://www.w3.org/TR/wai-aria-1.1/#aria-hidden"
    >follows the spec</a
  >.
</div>

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 (opens new window) to detect if a user has requested that the system minimize the amount of non-essential motion it uses.

Case	How It Affects Included Animations
No preference set (default)	Animations will render as expected
Preference set to `reduce`	Animations 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.