Icons are a powerful tool for web design, and they can help to simplify your content’s visual presentation. However, they can also introduce barriers for users with disabilities — particularly if you don’t consider the needs and preferences of those users when creating your website.
Here are a few quick tips to help you create accessible icons that work for a wider variety of people.
1. Make sure that users can perceive your icons
The Web Content Accessibility Guidelines (WCAG) is the international standard for digital accessibility. WCAG contains a number of success criteria that apply to icons, but one of the most important is WCAG Success Criterion (SC) 1.4.3, “Contrast (Minimum).”
This criterion requires the visual presentation of text and images of text to maintain a contrast ratio of at least 4.5:1. The contrast ratio refers to the difference in luminance (light) between a foreground element and its background.
Many icons contain text, and users with vision disabilities may not be able to perceive text with a low contrast ratio. Even if an icon does not contain text, it’s a good idea to keep the icon within WCAG’s thresholds — remember, you’re including the icon because you want users to click on it. If the image is invisible to some people, it’s not doing its job.
For more guidance, read: The Basics and Importance of Color Contrast for Web Accessibility
2. Provide text to explain the function of the icon
Many people use assistive technologies (AT) such as screen readers, which output text as audio or braille. If your icons serve an important function, it’s imperative that these users have access to that functionality.
For instance, if an icon is shaped like a piece of mail, most sighted users will understand that it leads to contact information or opens an email hyperlink. You can provide this context by supporting the icon with on-screen text labels. An email icon might appear alongside text that reads “Email Us,” which removes ambiguity and benefits all users.
Icons should also have appropriate alternative text (also called alt text or alt tags), particularly if the icon is the only way to activate a hyperlink, submit a form, or carry out another user action. Alt text should be concise, clear, and accurate.
For more guidance, read: 5 Steps for Writing Alt Text for Accessibility
3. Don’t write alternative text for icons that don’t need it
Some icons are purely decorative. For example, you might use a house-shaped icon next to a hyperlink to your homepage that reads “Homepage.”
In this case, alternative text would be redundant. Screen readers will announce the link text (“homepage"). Providing alt text for the icon won’t provide additional information — it will just make the on-site experience a little slower and more cumbersome.
Decorative content may be hidden from assistive technologies using CSS (Cascading Style Sheets) or WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications). Before hiding content, make sure that it’s purely decorative, repetitive, or that it appears offscreen.
For more guidance, read: Is It Okay to Hide Content from Screen Readers?
4. Identify icons consistently throughout your website
In the web accessibility space, consistent identification means that components that have identical functionality must also have identical labels.
Here’s a quick example of why this is important: An eCommerce website uses a shopping cart icon. Clicking the icon will bring the user to an overview of their shopping cart — but on some pages, clicking the icon will add a product to the cart.
The same icon is used for two distinct purposes, which is confusing. It may be particularly frustrating for people with cognitive limitations and other disabilities, but it’s a problem for every user.
This is covered by WCAG 2.1 SC 3.2.4, “Consistent Identification.” Some quick tips for avoiding issues:
-
Shared icons that serve different purposes should have different alternative text.
-
Icons with similar functionality should follow a consistent labeling pattern. For example, "Print x" where x would be the thing to be printed.
-
As discussed earlier in this article, all functional icons should have supporting on-page text or alternative text that explains their function.
For more guidance, read: Why Consistency is Important to Accessible Design
5. Avoid using emojis and icon fonts
In the early days of the internet, icon fonts like Microsoft’s Wingdings became a popular alternative to icon images. Icon fonts can scale easily, and they may save time during the web development process. By adjusting CSS, designers can quickly change the color and size of the icons.
However, icon fonts can create accessibility issues. Some users may ignore your website’s stylesheet, which can cause the icons to render unpredictably — defeating the purpose. Additionally, some screen readers may attempt to read the icons as text (after all, you’re presenting the icons as a font).
Likewise, Unicode emojis are widely supported. However, screen readers will often read the Unicode description for an emoji, which can cause confusion.
It’s possible to use icon fonts and emojis in an accessible way via WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) markup. In many situations, the better option is to use images with appropriate alt text.
If your website relies on icon fonts, work with your accessibility partner to ensure the best possible experience for screen reader users.
Related: Using Emoji Could Be Excluding People From Your Conversation
Web accessibility isn’t about restricting your design choices
If you’re feeling overwhelmed, there’s good news: Web accessibility gets much, much easier when you consistently think about the experiences of users with disabilities.
It’s also important to remember that following WCAG won’t make your website ugly, boring, or uncreative. Some of the most popular websites on the internet are accessible for people with disabilities, and the best practices of inclusive design provide enormous benefits for every type of organization.
To see how your site compares with WCAG 2.1 Level A/AA success criteria, get started with a free automated website analysis.
