Icons can convey all sorts of meaningful information, so it's important that they reach the largest amount of people possible.
We've done the research and simplified things down to two use cases you'll want to consider:
Decorative Icons are only being used for visual or branding reinforcement. If they were removed from the page, users would still understand and be able to use your page.
Semantic Icons are ones that you're using to convey meaning, rather than just pure decoration. This includes icons without text next to them used as interactive controls — buttons, form elements, toggles, etc.
Heads up: 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.
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>
Be sure to include ="true" in the reference - it's important for screen readers to have a value that follows the spec.
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.<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 to handle that hiding.title attribute on the icon to provide a tooltip for sighted mouse users.The sr-only utility class to visually hide semantic content that came with previous versions of Font Awesome still works in Version 6. But we've decided to rename it to fa-sr-only. This makes it clear that you're using a Font Awesome utility and avoids any collisions with similar utilities included in Web Frameworks.
<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>
Getting accessibility right can be tough. So we've tried to make it as simple as we can with our auto-accessibility feature. Using a dash of JS, we add supporting HTML elements and attributes so that your icons are accessible to the widest audience possible.
If 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:
role="img")title tag with a proper id attributearia-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
title="Magic is included!"
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
title="Magic is included!"
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>
If your icons are purely decorative, you're already done!
<!-- 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>
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>
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"><svg aria-hidden></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>
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.