Icons can convey all sorts of meaningful information, so it's important that they reach the largest amount of people possible.
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.). |
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…
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.
If your markup looks like this:
<button type="submit">
<span class="fa-solid fa-envelope"></span> Email Us!
</button>
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.
<button type="submit">
<span class="fa-solid fa-envelope" aria-hidden="true"></span> Email Us!
</button>
<button type="submit">
<svg class="svg-inline--fa fa-envelope" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="envelope" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" 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>
Auto-Accessibility will create alternative text for the semantic icon using the description that you need to set with the title attribute.
So if your markup looks like this (with your title attribute containing appropriate alternative text):
<button type="submit">
<i class="fa-solid fa-arrow-right" title="Next Page"></i>
</button>
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.
<button type="submit">
<i class="fa-solid fa-arrow-right" title="Submit My Tax Return" aria-hidden="true"></i>
<span class="sr-only">Submit My Tax Return</span>
</button>
<button type="submit">
<svg class="svg-inline--fa fa-arrow-right" aria-labelledby="svg-inline--fa-title-ajx18rtJBjSu" data-prefix="fa-solid" data-icon="arrow-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><title id="svg-inline--fa-title-ajx18rtJBjSu">Submit My Tax Return</title><path fill="currentColor" d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path></svg>
</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.
| Implementation Method | Included? | Enabled by Default? |
|---|---|---|
| Vue.js Component | ||
| React Component | ||
| Ember Component | ||
| Angular Component | ||
| Kit-hosted SVG + JS | ||
| Self-hosted SVG + JS | ||
| Kit-hosted Web Fonts (loaded via JS) | ||
| Kit-hosted Web Fonts (loaded via CSS) | ||
| Self-hosted Web Fonts (loaded via JS) | ||
| Self-hosted Web Fonts (loaded via CSS) | ||
| SVG Sprites | ||
| SVG Unicodes | ||
| Bare SVGs |
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.
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 -->
<i class="fa-solid fa-camera-retro" aria-hidden="true"></i>
<!-- Decorative SVG-based Icon -->
<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg">
<path d="M220.6 121.2L271.1 96 448 96v96H333.2c-21.9-15.1-48.5-24-77.2-24s-55.2 8.9-77.2 24H64V128H192c9.9 0 19.7-2.3 28.6-6.8zM0 128V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H271.1c-9.9 0-19.7 2.3-28.6 6.8L192 64H160V48c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16l0 16C28.7 64 0 92.7 0 128zM168 304a88 88 0 1 1 176 0 88 88 0 1 1 -176 0z"></path>
</svg>
<!-- Decorative SVG Sprites-based Icon -->
<svg aria-hidden="true" role="img">
<use xlink:href="fa-solid.svg#camera-retro"></use>
</svg>
If your icons have semantic meaning, you'll need to manually add a few things so that your icon is appropriately accessible:
| Web Fonts Implementations | SVG Implementations |
|---|---|
1. Add an aria-hidden="true" attribute to the icon. | 1. Add a proper role (role="img") to the the <svg> element. |
2. Provide a text alternative inside a <span> (or similar) element that is a sibling to the icon. | 2. Add a title element with a proper id attribute inside the <svg> element. |
| 3. Include appropriate CSS to visually hide the element while keeping it accessible to assisitive technologies. | 3. Add an aria-labelledby attribute to the <svg> element and set it's value to match the id of the newly added title element. |
| 4. Include appropriate CSS to visually hide the element while keeping it accessible to assisitive technologies. |
<a href="https://twitter.com/fontawesome">
<!-- Semantic Web Fonts-based Icon -->
<i aria-hidden="true" class="fa-brands fa-twitter"></i>
<span class="fa-sr-only">The Font Awesome teams' Twitter account</span>
</a>
<a href="https://twitter.com/fontawesome">
<!-- Semantic SVG-based Icon -->
<svg aria-labelledby="my-twitter-title" role="img" xmlns="http://www.w3.org/2000/svg">
<title id="my-twitter-title">The Font Awesome team's Twitter account</title>
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
</a>
<a href="https://twitter.com/fontawesome">
<!-- Semantic SVG Sprites-based Icon -->
<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>
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.
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 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.
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.