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.
Web Fonts with CSS: 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.
<!-- Decorative Icon with Accessible Markup --><iclass="fas fa-camera-retro"aria-hidden="true"></i>
Web Fonts with CSS: 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.
title attribute on the icon to provide a tooltip for sighted mouse users.
<!-- Semantic Icon with Accessible Markup --><iaria-hidden="true"class="fas fa-car"title="Time to destination by car"></i><spanclass="sr-only">Time to destination by car:</span><span>4 minutes</span>
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 --><ahref="path/to/shopping/cart"aria-label="View 3 items in your shopping cart"><iaria-hidden="true"class="fas fa-shopping-cart"></i></a><!-- An icon being used as a link to a navigation menu --><aaria-label="Skip to main navigation"href="#navigation-main"><iaria-hidden="true"class="fas fa-bars"></i></a><!-- An icon being used as a delete button's symbol with a title attribute to provide a native mouse tooltip --><aaria-label="Delete"class="btn btn-danger"href="path/to/settings"><iaria-hidden="true"class="fas fa-trash"title="Delete this item?"></i></a>
SVG with JavaScript: Semantic Icons
Advertisement
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 7,864 icons in Font Awesome
5 Classic styles of every icon
3 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
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:
Proper ARIA role (role="img")
title tag with a proper id attribute
aria-labelledby attribute and wire it to the title tag
<!-- Your HTML - Semantic Icons --><ititle="Magic is included!"class="fas fa-magic"></i>
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 --><ititle="Magic is included!"data-fa-title-id="magic"class="fas fa-magic"></i>
If your icons are purely decorative, you're already done! Our Auto-Accessibility automatically adds aria-hidden=true and role="img" to your inline SVG attributes so that your icons are properly accessible.
<!-- Your HTML - Decorative Icons --><iclass="fas fa-camera-retro"></i>
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 --><ahref="https://twitter.com/fontawesome"><svgaria-labelledby="my-twitter-title"role="img"><titleid="my-twitter-title">The Font Awesome teams' Twitter account</title><usexlink:href="fa-brands.svg#twitter"></use></svg></a>
SVG Sprites: Decorative Icons
Add aria-hidden and role for decorative sprites.
<!-- Manually add aria-hidden and role --><ahref="https://twitter.com/fontawesome"><svgaria-hidden="true"role="img"><usexlink:href="fa-brands.svg#twitter"></use></svg></a>
Using Property Shorthand
You might be tempted to use <svg aria-hidden> and leave the ="true" part out. Don't, it's important for screen readers to have a value that follows the spec(opens new window).
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.