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.
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.
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.
If your icons have semantic meaning, you'll need to manually add a few things so that your icon is appropriately accessible:
- 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.
|Visually hides an element containing a text-equivalent for an icon while keeping it accessible to assisitive technologies|
|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:
An icon being used as a link to a navigation menu:
An icon being used as a delete button's symbol with a title attribute to provide a native mouse tooltip:
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 (
title tag with a proper
id attribute, based upon the
title attribute given to the icon
aria-labelledby attribute and wire it to the
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.
If your icons are purely decorative, you're already done!
Our auto-accessibility automatically adds
role="img" to your inline SVG attributes so that your icons are properly accessible.
SVG Sprites: Semantic Icons
SVG Sprites: Decorative Icons
role for decorative sprites.
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 |
|Animations will be disabled|
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.