Accessibility (2024)

Icons can convey all sorts of meaningful information, so it's important that they reach the largest amount of people possible.

Advertisem*nt

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 --> <i class="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 --> <i aria-hidden="true" class="fas fa-car" title="Time to destination by car"></i> <span class="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 --> <a href="path/to/shopping/cart" aria-label="View 3 items in your shopping cart"> <i aria-hidden="true" class="fas 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="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 --> <a aria-label="Delete" class="btn btn-danger" href="path/to/settings"> <i aria-hidden="true" class="fas fa-trash" title="Delete this item?"></i> </a>

SVG with JavaScript: Semantic Icons

Advertisem*nt

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 --> <i title="Magic is included!" class="fas 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="fas" 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 usefulfor 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="fas 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="fas" 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>

SVG with JavaScript: Decorative Icons

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.

SVG Sprites: Semantic Icons

Advertisem*nt

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>

SVG Sprites: Decorative Icons

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

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.

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.

I am an accessibility expert with a deep understanding of web design principles, particularly in the context of using icons to convey information effectively. My expertise is based on extensive research, practical application, and a comprehensive understanding of accessibility standards.

The provided article discusses the crucial role of icons in conveying information on web pages and emphasizes the importance of making them accessible to a wide audience. The article categorizes icons into two main types: Decorative Icons and Semantic Icons. Decorative Icons serve visual or branding reinforcement, while Semantic Icons convey specific meanings.

Here's a breakdown of the key concepts discussed in the article:

Web Fonts with CSS: Decorative Icons
- For purely decorative icons, the article recommends adding the aria-hidden="true" attribute to ensure accessibility.
Web Fonts with CSS: Semantic Icons
- Semantic Icons, which convey meaning, require additional accessibility measures, including aria-hidden="true", a text alternative inside a <span>, and appropriate CSS for visual hiding. A title attribute provides a tooltip for sighted users.
Focusable Interactive Elements
- For interactive elements, adding aria-label directly to the element is suggested as an alternative text or label. Visual tooltips for mouse users can be provided using the title attribute.
SVG with JavaScript: Semantic Icons
- Auto-Accessibility feature simplifies making semantic icons accessible by adding proper ARIA roles, a title tag with an ID attribute, and an aria-labelledby attribute.
SVG with JavaScript: Decorative Icons
- Auto-Accessibility automatically adds aria-hidden="true" and role="img" for decorative icons using inline SVG.
SVG Sprites: Semantic Icons
- SVG Sprites follow similar rules to SVG with JavaScript, but manual addition of title, role, and aria-labelledby is required.
SVG Sprites: Decorative Icons
- Decorative sprites in SVG Sprites should include aria-hidden="true" and role="img".
Using Property Shorthand
- The article warns against using <svg aria-hidden> without specifying ="true" for proper adherence to accessibility specifications.
Other Cases and Information
- The article acknowledges that the discussed scenarios and techniques are not exhaustive, and there are additional complexities in accessibility. It provides links to further readings and resources for a more in-depth understanding of accessibility issues.

In summary, the article provides practical guidance and best practices for ensuring that icons are not only visually appealing but also accessible to users with varying needs, aligning with the principles of inclusive design and accessibility standards.

FAQs

Accessibility? ›

Accessibility is the design of products, devices, services, vehicles, or environments so as to be usable by people with disabilities.

Read On ›

What is an example of accessibility? ›

One of the most important practices is to provide ramps and/or elevators for wheelchair access. In addition, digital accessibility can include providing keyboard-only navigation for websites, ensuring that links and buttons are easily clickable, and providing voice-controlled options for devices.

Discover More Details ›

What is accessibility in your own words? ›

Accessibility is the practice of making information, activities, and/or environments sensible, meaningful, and usable for as many people as possible. A common example of accessibility that we have all likely encountered, is in the context of architectural design. Consider the “accessible entrance” to buildings.

What is the full meaning of accessible? ›

easy to approach, reach, enter, speak with, or use. able to be used, entered, reached, etc.: an accessible road; accessible Mayan ruins.

See Details ›

What are the four types of accessibility? ›

There are four main guiding principles of accessibility upon which WCAG has been built. These four principles are known by the acronym POUR for perceivable, operable, understandable and robust.

Find Out More ›

What does accessibility mean? ›

the quality of being able to be entered or used by everyone, including people who have a disability: The theatre offers full wheelchair accessibility.

Tell Me More ›

What is accessibility for people? ›

Accessibility is about removing barriers enabling users to engage and participate in everyday activities. This includes reducing and overcoming the barriers that might occur for people with disabilities and includes the digital and physical interactions that people have in everyday life.

Show Me More ›

What is basic accessibility? ›

Accessibility is the practice of making your websites usable by as many people as possible. We traditionally think of this as being about people with disabilities, but the practice of making sites accessible also benefits other groups such as those using mobile devices, or those with slow network connections.

Explore More ›

What is human accessibility? ›

Accessibility is the degree to which a product, device, service, environment, or facility is usable by as many people as possible, including by persons with disabilities.

How would you describe yourself for accessibility? ›

How should I self-describe?

Be prepared. Have it written down already and stick to what you have written. ...
Name yourself, and repeat your name every time you speak. ...
Be concise and brief in your self-description. ...
Gender. ...
Cis / trans. ...
Age. ...
Disability / neurodivergence. ...
Race / ethnicity.

More items...

Show Me More ›

What is word accessibility? ›

Accessibility is fundamentally about making sure people can access the content you create. To create an accessible Word document, you will need to consider the accessibility of all the information in the document, including elements like the document structure, hyperlinks, lists, and images.

Read The Full Story ›

What is easy accessibility? ›

(æksesɪbəl ) adjective B2. If a place or building is accessible to people, it is easy for them to reach it or get into it. If an object is accessible, it is easy to reach.

See Details ›

What is the same meaning of accessibility? ›

available, handy, reachable, usable.

Get More Info Here ›

What are the three pillars of accessibility? ›

3 things are more easy to remember with the acronym CVC or Complexity, Vision and Color. Problem: Do you really need your user to enter all these fields?

What is the biggest barrier to accessibility? ›

What are the five barriers to accessibility?

Assuming a person with a disability is inferior.
Assuming that someone with a speech impairment cannot understand you.
Forming ideas about a person because of stereotypes or a lack of knowledge.

More items...

What are the 5 A's of accessibility? ›

As conceived by Penchansky and Thomas, access reflects the fit between characteristics and expectations of the providers and the clients. They grouped these characteristics into five As of access to care: affordability, availability, accessibility, accommodation, and acceptability.

View Details ›

What is an example of accessibility in the workplace? ›

This means not only physical accessibility, such as wheelchair ramps, braille signage, and accessible restrooms, but also digital accessibility, meaning information and communication technology is accessible to all and compatible with assistive technology devices.

What are the 3 aspects of accessibility? ›

Accessibility means different things to different people but accessibility is not just a single thing. We can broadly divide it into three pillars: emotional, functional and technical. Each pillar must be accessible in itself but all must be considered together.

Learn More ›

Can you give some examples of accessibility settings? ›

Common accessibility features

Features for blind or low-vision computer users: Features such as text-to-speech allow users to hear what's on the screen instead of reading it. Other features, like high-contrast themes and enlarged cursors, make it easier for users with limited vision to see the screen.

Discover More Details ›

What is an example of an accessibility statement? ›

Example Accessibility Statement for Our Company

The work we do to provide the best user experience for everyone is ongoing, through applying the current accessibility standards as they apply to our public website. Our Company has applied the following standards to our website: WCAG 2.1 AA. Section 508.

Show Me More ›