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 make sure that the technology supporting impairments, like screen readers, either ignore or better understand the icons you're using on the web.
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.
In these cases, the icon should be hidden from the screenreader so it doesn't interfere with the established meaning.
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 Icons Accessible with Auto-Accessibility
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 30,013 icons in Font Awesome
5 Classic styles of every icon
4 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
The easiest way to support accessible icons is by using the Auto-Accessibility feature included in Font Awesome's web software. Here's how it works…
Icons Used as Decorative Elements
Auto-Accessibility will make sure the decorative icon is ignored by assistive technology. There's nothing extra you need to do on top of how you would usually reference an icon.
Auto-Accessibility will then automatically hide it from screenreaders by adding the aria-hidden(opens new window) attribute. While the outcome is the same, the rendered code is different for Font Awesome's Web Fonts or SVG-based software.
Auto-Accessibility will adjust it so the meaning is conveyed in supporting elements that only screenreaders "see". Again, while the outcome is the same, Font Awesome's Web Fonts or SVG-based software renders different code.
<buttontype="submit"><iclass="fa-solid fa-arrow-right"title="Submit My Tax Return"aria-hidden="true"></i><spanclass="sr-only">Submit My Tax Return</span></button>
Auto-Accessibility feature is included in many of Font Awesome's web-based software options. Though it is not included in all cases, you can always make your icons accessible manually in those situations.
In the cases where Auto-Accessibility isn't available or you'd prefer to implement best practices yourself, you can use the following instructions to make your icons as accessible to as many people as possible.
Icons Used as Decorative Elements
If your icons are purely decorative, you'll need to set 1 or 2 things manually to the icon's code snippet to make sure screen readers and assistive tech ignore them when reading a page to a person.
Web Fonts Implementations
SVG Implementations
1. Add an aria-hidden="true" attribute to the icon.
1. Add an aria-hidden="true" attribute to the the <svg> element
2. Add a role="img"to the the <svg> element
<!-- Decorative Web Fonts-based Icon --><iclass="fa-solid fa-camera-retro"aria-hidden="true"></i>
To help with any manual accessibility efforts, Font Awesome's web software contains some styling utilities based on best practices(opens new window). These help visually hide elements while keeping them accessible to assisitive technologies.
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.
Animating Icons and Accessibility
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 30,013 icons in Font Awesome
5 Classic styles of every icon
4 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
Font Awesome comes bundled with basic animations in our support styling. These animations now support and leverage the prefers-reduced-motionCSS 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: