Improving Icon Usability and Accessibility: 6 Valuable Tips

In this article, we delve into six actionable tips to elevate your icon designs from good to exceptional, focusing on inclusivity and ease of use. 

Whether you’re a seasoned designer, a developer with an eye for detail, or simply an enthusiast for digital inclusivity, these insights will empower you to create icons that resonate with a broader audience.

Icons are small images or symbols used to represent an idea, function, or feature in a graphical user interface (GUI). They provide a quick, intuitive way to convey information without relying on text. They can represent actions (like a trash can for ‘delete’), objects (such as a shopping cart for ‘cart’), or concepts (a heart for ‘like’).

Icons need to be understandable and user-friendly for everyone, including those with disabilities. A user experience that fails to consider all users can inadvertently:

Making icons accessible also means complying with key regulations and guidelines such as the European Accessibility Act (EAA), the Americans with Disabilities Act (ADA), and the Web Content Accessibility Guidelines (WCAG). These regulations are benchmarks of a commitment to inclusivity and equality in the digital realm.

Even the most commonly used icons can sometimes fail to convey their intended message to all users. Take, for instance, the hamburger icon, commonly used to denote a menu. While it’s prevalent in many interfaces, not all users immediately recognise its purpose, especially those who are new to digital navigation or come from different cultural backgrounds.

This is where accompanying text steps in, eliminating guesswork and providing clear, unambiguous guidance on what the icon represents.

By adding text, you:

An often overlooked yet crucial aspect of accessible icon design is the application of sufficient colour contrast. Icons must exhibit a strong contrast between the foreground (the icon itself) and the background. This contrast is necessary for users who have low vision or colour vision deficiencies. 

The Web Content Accessibility Guidelines (WCAG) 2.1 AA standard is the benchmark to aim for when it comes to colour contrast. This standard ensures that your icons are designed with a level of contrast that is accessible to a wide range of users, including those with visual impairments.

Fortunately, several tools are available to help you test and achieve the right colour contrast in your icons:

While ensuring the right colour contrast is important for accessibility, relying solely on colour to communicate information can render the icons inaccessible to users with certain visual impairments, such as colour blindness. Icons should be understandable without colour reliance, making them universally accessible.

Alt text, AKA alternative text, serves as a textual description of an image, icon, or other non-text elements in digital media. For icons, alt text should succinctly describe the function of the icon rather than its appearance. 

For instance, an email icon could have the alt text “Email us”, directly informing the user of the icon’s purpose. This practice ensures that the functionality of icons is conveyed effectively to users who cannot visually perceive them.

Keep the following in mind to make your alt texts effective:

Users with visual impairments rely on screen readers to navigate web content. Others might use text-to-speech software, magnifiers, or other assistive tools. Each tool has different compatibilities with various image filetypes, interpreting HTML elements differently. That’s why it’s vital to implement alt text for different image file types:

For most web images, you use the <img> HTML tag. The alt attribute is used here to provide a text alternative for the image.

SVGs are often used for icons due to their scalability and crispness at various resolutions. They cannot have an alt attribute. Instead, you can give an SVG an accessible name by giving it a role and a title.

Some SVGs are decorative icons. You can hide them for assistive technologies by adding an aria-hidden state.

It is always best to write a label, too, since not everyone knows what a certain icon means. In this case, you can hide the image for assistive technologies and just add text to the icon.

Sometimes icons or images are added via CSS as background images. These are not accessible by default since CSS is for styling and not content. To make these accessible, you would typically have an accompanying HTML element with appropriate ARIA attributes or visually hidden text to convey the same information.

Icon fonts, such as FontAwesome, use font glyphs instead of traditional images. For these, ensure that you use appropriate ARIA attributes or include hidden text that screen readers can interpret.

Here, aria-hidden="true" hides the icon from screen readers, and the accompanying hidden text provides the necessary description.

For image maps (using <map> and <area> tags), each clickable area should have an alt attribute.

Generally, users should not need to perform any actions (like hovering or clicking) for icons to be visible. This rule has an exception for accessibility features like “Skip to main content” icons, which are designed to become visible when keyboard users press the “Tab” key.

However, visibility isn’t just about colour and text; the physical size of the icons plays an equally important role. Icons typically have a square shape, and popular sizes (in pixels) include:

While these sizes cater to various design needs, it’s necessary to consider the minimum size for accessibility. Icons smaller than 44×44 pixels may pose challenges for some users, especially on mobile devices where touch interaction is the primary mode of navigation. 

According to the WCAG 2.2 guidelines, a clickable icon should be at least 24×24 pixels. However, as a best practice, aim for a minimum size of at least 44×44 pixels. This size ensures that icons are not only visible but also comfortably interactable for users with varying degrees of motor skills.

The challenge lies in balancing aesthetic design with practical accessibility. Striking this balance is key to creating an inclusive web environment where design elegance meets accessibility standards.

Consistency in the use of icons on your website is paramount in reducing ambiguity and ensuring that all users can immediately recognise and understand them. When users know what to expect from each icon, it reduces cognitive load and makes the user experience more intuitive.

Always use the same icon to signify the same meaning. For example, if a magnifying glass icon is used to represent searching on one page, it should be used for the same purpose throughout the site.

An icon should never signify multiple different meanings. This can cause confusion and uncertainty, especially for users who rely on patterns and predictability to navigate. For example, using the same icon for “opens in new tab” and “opens external website” could be misleading as the actions are different, and the distinction might not be clear. Each function or action should have a distinct and unique icon to avoid misinterpretation.

The icons on a mobile app should correspond in appearance and function to those on the desktop version of the website. This uniformity ensures a seamless user experience regardless of the device or platform used.

To truly make your icon buttons and links accessible to all users, it is essential that they are interactable through multiple input methods: mouse clicks, touchscreens, and keyboard inputs. This inclusivity ensures that users with different abilities or preferences can interact with your site effectively:

There is no need to be intimidated by designing and creating your own accessible icons – there are plenty of pre-made icon sets available online for you to download. These icons are ready to use and can help ensure your website meets accessibility standards.

Opt for SVG or PNG (Portable Network Graphics) formats. These formats are generally more accessible than icon fonts because they are better recognised and interpreted by screen readers and other assistive technologies. SVGs, in particular, are scalable without compromising quality, making them ideal for various screen sizes and resolutions.

If you decide to use icon fonts, be cautious about their interaction with screen readers. To avoid confusion, add the aria-hidden="true" attribute to the font characters. This attribute tells screen readers to ignore these elements, preventing them from reading out irrelevant information. However, remember that relying solely on icon fonts can be less accessible, so use them judiciously.

To deepen your understanding of accessibility in web design, consider exploring The A11y Collective’s courses. You can go for the “ARIA explained” course or “Accessible Design, The Basics” course to gain valuable insights into how ARIA attributes work and how they can enhance the accessibility of your web content.

As we wrap up our exploration of creating accessible icons, it’s important to remember that this is just one aspect of a much broader and incredibly vital field: accessible web design. The journey toward creating an inclusive digital world is ongoing, and continuous learning plays a binding role in this endeavor.

The A11y Collective stands as a beacon in this journey, offering a wide range of courses designed for various levels of expertise in web accessibility. Whether you’re just starting out or looking to deepen your existing knowledge, The A11y Collective provides the resources to guide you every step of the way.

For those inspired to further immerse themselves in the world of accessible web design, start the “Accessible Design, The Basics” course. This course is an excellent next step for anyone eager to expand their understanding and skill in creating web designs that are not only visually appealing but also universally accessible.
Now, it’s your turn to take action – your journey in enhancing website accessibility starts here. Check out the full suite of courses from The A11y Collective today and become a champion of web accessibility!