The Pros and Cons of Icons for Accessibility
The Pros and Cons of Icons for Accessibility
Ready to see AudioEye in action?
Watch Demo
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?
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?
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.
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 see AudioEye in action?
Watch Demo
Ready to test your website for accessibility?
Share post
Topics:
Keep Reading
Breaking Down Barriers in Healthcare: Perspective from AudioEye’s Disability ERG
Learn how improving accessibility in healthcare can lead to better, more inclusive care for people with disabilities.
community
October 24, 2024
The Impact of Accessibility on Business Websites
Maxwell Ivey, an AudioEye A11iance Member, describes the impact and importance of enhancing digital accessibility across online spaces.
community
September 20, 2024
Achieving Business Success by Empowering Disabled Employees
Learn how hiring people with disabilities can help organizations gain a competitive edge,
community
August 29, 2024
