The Pros and Cons of Icons for Accessibility

Back to blog

The Pros and Cons of Icons for Accessibility

Posted October 06, 2022

AudioEye

Posted October 06, 2022

A stylized e-commerce sites with several icons circled: a shopping cart icon in the upper-right corner and dollar sign icons over a row of t-shirts.
A stylized e-commerce sites with several icons circled: a shopping cart icon in the upper-right corner and dollar sign icons over a row of t-shirts.

Icons are a great way to save space on a web page, but are they good for accessibility? Charles Hiser, one of AudioEye’s A11iance Advocates, weighs in.

If you picked a random website to visit, there’s a pretty good chance it would have icons everywhere.

As design trends go, icons are here to stay — and for good reason. Their small size (relative to text links) makes them perfect for mobile devices. However, it does raise an important question for accessibility: Do icons work well for people with disabilities?

This post will explain two key benefits (and a pair of potential drawbacks) when it comes to the use of icons, through the lens of assistive technology.

What Are the Benefits of Using Icons?

Examples of how icons can help with comprehension (a shopping cart) and save space (two arrow icons instead of a text link that reads "Click to see more".

1. Icons Can Help With Comprehension

From the Greek word eikon (meaning “to resemble”), an icon can take the place of a word or phrase in the user experience.

If an icon is widely understood — for example, a shopping cart icon — it can help more people navigate a site.

According to the World Wide Web Consortium (W3C), people who have language comprehension, learning, or reading difficulties may rely on symbols to help them understand content and interact with a page.

People who use a magnifier to read display screens can also benefit from icons, which allow them to quickly navigate a page instead of having to read through dense blocks of text.

2. Icons Save Space

I touched on this idea above, but one of the main drivers for the use of icons is the shift toward mobile browsing. Icons take up less real estate than text links — and that can help declutter small screens.

For example, designers can use a right arrow icon to replace a button with the label “Click to See More.”

Thoughtful, minimalist design benefits everyone — but especially people who use alternative techniques to browse websites. 

However, it’s important to remember that many icons should be accompanied by a label for screen readers.

What Are the Downsides of Using Icons?

Downsides of icons for accessibility: Universal icons are rare, labels are unclear of missing, and icons are usually decorative.

1. Universal Icons Are Rare

There are a few icons that are pretty universally recognized. Most people know that clicking a magnifying glass icon will search an input field, and clicking a printer icon will print a file.

Unfortunately, the number of universal icons is few and far between. Most icons are ambiguous. Take a heart icon, for example. Sometimes it’s a way to like or favorite an item. Other times it’s a way to save an item, or add it to a wish list.

Icon accessibility isn’t just about having enough contrast between the icon and background, or adding padding around it so people with motor impairments can easily click it.

It’s also about eliminating ambiguity and making sure everyone knows what will happen if they click an icon. In fact, WCAG Success Criterion (SC) 1.1.1: Non-text Content requires that any content presented through visual means also has a text equivalent that provides a similar experience to that of an image.

2. Icons Are Usually Decorative

Proper decorative image markup is also required to meet WCAG SC 1.1.1: Non-text Content. The W3C defines pure decoration as “serving only an aesthetic purpose, providing no information, and having no functionality.”

For screen reader users, decorative elements can become extraneous noise that gets in the way of the task they want to complete.

Plenty of icons fall under this category. For example, if you have an Instagram icon next to a link that says “Follow Us On Instagram.” There’s nothing the icon conveys that isn’t communicated by the link itself — and it should be hidden from screen reader users.

If an icon-heavy page does not follow this guideline, the screen reader could repeat information or mispronounce names of links or words near the icon.

Tips for icon accessibility: Add labels to your custom icons and hide decorative icons from screen readers.

How Do I Make Sure My Icons Are Accessible?

The upside about all of these downsides? Each one can easily be avoided. These are things to be mindful of, but they aren’t immovable barriers to accessibility.

If you want to use an icon that isn’t universally recognized, or design a set of icons that match your brand’s visual style, that’s totally fine. Just be sure to label each one, so it’s clear what purpose it serves.

The same goes for decorative icons. There’s nothing wrong with adding them; just be sure they aren’t getting in the way of a screen reader user’s ability to navigate a page.

As with most things in design, icons can be a powerful optimization and tool for better communication. The key is using them thoughtfully — and in a way that enhances the experience for all users.

Ready to test your website for accessibility?

Scan your website now.

Share post

Topics:

Keep Reading