Accessibility

Icons can convey all sorts of meaningful information, so it’s important that they reach the largest number 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 ensure that the assistive technology supporting impairments, like screen readers, either ignore or better understand the icons you’re using on the web.

Font Awesome icons are accessible by default!

Our icons are ignored by assistive technology, such as screen readers, by default. If your icon does need to be read out by screen readers, you can simply add an aria-label!

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

Icon Use	What to Do
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. Font Awesome icons are hidden from assistive technology by default, so they don’t interfere with the established meaning in these cases.
Semantic Elements	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.).

Making Decorative Icons Accessible

Say you have the following markup:

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

The text inside the button explains the meaning of the button: “Email us!“. Assistive technology, such as screen readers, will read this out, so it’s clear what’ll happen when you press the button. The screen reader shouldn’t announce that there’s an icon present, as it is purely decorative.

Accessible Decorative Icons With Web Fonts

By default, Font Awesome web font icons are ignored by assistive technology. So you’re all set!

Accessible Decorative Icons With SVG

SVG icons injected via your Font Awesome Kit or the self-hosted SVG + JS method will automatically get an aria-hidden="true" attribute, so they’re hidden from assistive technology such as screen readers.

Let’s look at our previous example, but now with SVG icons automatically inserted via a Kit:

<button type="submit">
  <svg aria-hidden="true" class="svg-inline--fa fa-envelope" data-prefix="fas" data-icon="envelope" role="img" viewBox="0 0 512 512">
    <path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path>
  </svg>
  Email Us!
</button>

If you manually inline our SVG icons, either directly or with sprites, you’ll have to add the aria-hidden="true" yourself.

Making Semantic Icons Accessible

There are two common use cases for semantic icons: as a visual cue inside an interactive element like a button, or alongside text to provide added context. Let’s look at how to deal with them both.

Semantic Icons in Interactive Elements

When your icon is the only visual element in an interactive element, the icon should explain what it does. For example, a button with an icon of an envelope suggests that pressing it will let you send an email.

Assistive technology can’t “see” the icon, so we should add an aria-label explaining what the button does. Important detail: we want a label on the interactive element, not on the icon, as that is what the user interacts with!

When the purpose of our button is communicated via our aria-label, we can hide the icon. Our web fonts and JavaScript software do this out of the box. If you use sprites or inline an SVG yourself, you should manually add an aria-hidden="true" to hide it from assistive technology.

Web Fonts

<button type="submit" aria-label="Email us!">
  <i class="fa-solid fa-envelope"></i>
</button>

SVG

<button type="submit" aria-label="Email us!">
  <svg aria-hidden="true" class="svg-inline--fa fa-envelope" data-prefix="fas" data-icon="envelope" role="img" viewBox="0 0 512 512">
    <path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path>
  </svg>
</button>

SVG Sprites

<button type="submit" aria-label="Email us!">
  <svg aria-hidden="true" role="img">
    <use href="fa-solid.svg#envelope"></use>
  </svg>
</button>

Semantic Icons in Content

If your icon is not part of an interactive element, but you would still like the icon to be announced by assistive technology such as screen readers, you can put an aria-label directly on the icon.

For web font icons, also add a role="img" so the icon is treated as an image, as aria-label officially isn’t supported on generic elements like an <i> or a <span>.

For SVG icons, make sure aria-hidden is removed or set to false so the icon is visible to assistive technology.

Web Fonts

We <i class="fa-solid fa-heart" aria-label="love" role="img"></i> pizza!

SVG

We
<svg aria-label="love" aria-hidden="false" class="svg-inline--fa fa-heart" data-prefix="fas" data-icon="heart" role="img" viewBox="0 0 512 512">
  <path d="M241 87.1l15 20.7 15-20.7C296 52.5 336.2 32 378.9 32C452.4 32 512 91.6 512 165.1v2.6c0 112.2-139.9 242.5-212.9 298.2C286.8 475.4 271.5 480 256 480s-30.8-4.6-43.1-14.1C139.9 410.2 0 279.9 0 167.7l0-2.6C0 91.6 59.6 32 133.1 32C175.8 32 216 52.5 241 87.1z"/>
</svg>
pizza!

SVG Sprites

We
<svg aria-label="love" aria-hidden="false" role="img">
  <use href="fa-solid.svg#heart"></use>
</svg>
pizza!

There are multiple approaches to accessibility

Using aria attributes is just one way to help assistive technology understand what’s going on on the page. There are other options too, like using visually hidden text inside a <span> or using the <title> tag in an SVG. These methods might be better suited if, for example, machine translations or copy-pastability is important.

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.

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

• Accessible Icon Buttons
• Accessible SVGs: Perfect Patterns For Screen Reader Users
• Aria-label Does Not Translate
• Contrast Ratio Checker from Lea Verou

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