It’s likely that any website you randomly choose to explore will be filled with icons. There’s a solid reason why icons have become a perennial favorite in the world of web design. Mobile devices can easily display them due to their modest size (relative to text links). But it does bring up a significant issue related to accessibility: Can persons with disabilities benefit from using icons?
Our blog will explore how using icons for accessibility will extremely benefit your website from the purview of Assistive Technology (AT).
Table of Contents
What is Assistive Technology (AT)?
Before we jump into the main topic, let us first understand the basics.
Assistive technology is a technology that people with disabilities use to do things that would be hard or impossible for them to do without it. Assistive technology includes things like walkers, wheelchairs, and hardware, software, and peripherals that help people with disabilities use computers and other information technologies.
For example, People with limited hand function may use different devices to use a computer such as a keyboard with big keys or a specially designed mouse for people with disabilities. People who are blind usually make use of TTS (text-to-speech) software which can read out text on the screen, likewise, people with vision impairments make use of magnifier software that enlarges the content on the screen, etc.
Now that you understand the basics of AT, let us understand the benefits of using icons.
Benefits of using Icons for Accessibility
1. Easy understanding
Icons, which derive from the Greek word eikon (meaning “to resemble”), are graphical representations of concepts, words, or phrases.
More users will be able to find their way through a website with the aid of recognizable icons, for example, the calling icon in the website makes users easily identify the contact information of the organization.
The World Wide Web Consortium (W3C) suggests that people who have trouble with language understanding, learning, or reading might benefit from using icons to better grasp the content and engage with a website.
Furthermore, people who rely on magnifier software to navigate through the website can skip irrelevant parts of the page and jump into the desired content on the webpage.
2. Less clutter
The rise of mobile internet usage is a key factor in the proliferation of icons. Icons are more space-efficient than text links, which is especially helpful on mobile devices with small screens.
To hide the text “Click to See More,” designers might use a right arrow icon instead. It’s beneficial for everyone if websites are designed with care and simplicity, but more for people who use Assistive Technology to navigate the web content. However, keep in mind that many icons need labels for the screen reader users.
Are all icons accessible?
Unfortunately, there are some downsides to using icons
3. Universal icons are less in number
Few symbols have near-universal recognition. Input fields with a magnifying glass icon may be used for searching, and documents with a printer symbol can be printed with a single click.
However, there aren’t very many really popular icons. The majority of icons don’t clearly represent anything. For instance, consider a heart symbol. As a kind of expression of approval, it might be used in certain situations. Sometimes it serves as a reminder or a wish list addition.
It’s also important that everyone understands what will happen when they click on an icon, so that any uncertainty is removed. According to WCAG Success Criterion (SC) 1.1.1 Non-text Content: Any information displayed visually must also be made available in a textual form that is intended to replicate the original experience as closely as possible for those who prefer to read rather than look at the screen.
4. Decorative icons
To achieve WCAG SC 1.1.1, it is necessary to properly mark up ornamental images. World Wide Web Consortium (W3C) defines pure decoration as “serving just an aesthetic purpose, providing no information, and having no functionality.”
For screen reader users, decorative elements might become clutter that interferes with the job at hand.
There are a lot of icons that fit this description. To illustrate, assume you have a button that reads “Follow Us on Instagram” and an Instagram symbol to the right of it. The symbol adds no information beyond what is already there in the link text, hence it should be hidden from screen reader users.
What Can I Do To Make My Icons Accessible?
What’s the bright side of all of these drawbacks? Each one is readily avoidable. These are important considerations, but they are not insurmountable impediments to accessibility.
It’s completely okay to utilize a non-standard icon or create your own collection of icons to fit with the aesthetic of your business. However, you should label each one of them so that everyone knows the purpose of those icons.
Likewise, decorative icons fall within this category. Including them is not a problem, just make sure they don’t make it difficult for those using screen readers to travel around a website.
When you are building a website from scratch, there are multiple things to keep in mind. It becomes a challenge to keep all these accessibility aspects in mind. In fact, new developers can often get overwhelmed by so many accessibility guidelines. AEL Data can help support your accessibility team. Get in touch with our digital accessibility expert today.
