Making icons accessible

I doubt there are many webpages nowadays that don't have at least one or two icons on them. These tiny symbols help users better understand and navigate digital interfaces. But how can we make these usable by as many people as possible?

WCAG-related success criteria (SC)

Alt text (SC 1.1.1)

All icons need alternative (alt) text to provide people using screen readers context. If the icon is informational, the alt text should describe the information the icon represents. If the icon is actionable, the alt text should describe the purpose of the icon. If the icon has a text label describing the same thing as the icon, the alt text should be left blank.

Use of color (SC 1.4.1)

Color cannot be the sole method of conveying information or distinguishing icons from each other. This requirement helps people who are color blind or have low vision.

Color contrast (SC 1.4.11)

All icons must have at least a 3 to 1 color contrast against their background to help all people, especially those with low vision, be able to see them.

Focus indicator (SC 2.4.7)

When an icon receives keyboard focus, the focus indicator must display. This allows people who use a keyboard or other assistive technology to navigate webpages efficiently. Note: The indicator must also have at least a 3:1 contrast ratio against all adjacent colors.

Consistent usage (SC 3.2.4)

All icons should be used in consistent manner. This improves recognition for all users, especially those with cognitive disabilities.

General icon usability tips

Add text labels

Outside of icons used within UI components, icons should almost always be used in combination with meaningful text to support all users in understanding what the icon represents. There are very few widely recognized icons.

Avoid using solely as decoration

Avoid using icons solely for decoration or visual interest, as it detracts from their intention elsewhere. Consider the surrounding context of icons too; if icons are cluttered and not spaced well, it can lead to visual noise and confusion. If you are looking for larger visual to help emphasize a concept, consider using a pictogram or illustration.

(If applicable) Avoid using platform-specific icons

Avoid using Android- or iOS-specific icons if your product can be used across web, Android, and iOS. If a platform-agnostic icon does not exist, it is recommended to conduct a quick round of user research to verify the icon is easily understood by all users.