10 Best Practices for Making Web Icons Accessible

It's no secret that icons are widely used in web design and, to fully reap their potential, they should be truly inclusive.

There are multiple ways in which brands can make their website content easy to interact with for people with disabilities, and icon accessibility is one of them.

Regardless of the type of web icons you choose—material icons, flat icons, graphical icons, ready-made or fully custom, or on-brand icons—they have to be visible to all users. How can you make icons accessible to everyone? Keep reading to find out:

• What defines an accessible icon
• Best practices for making icons accessible
• Types of web icons and practical approaches for improving their accessibility

What's an accessible icon?

Icons that can be understood by all website visitors, no matter what impairments or disabilities they might have, can be considered accessible.

To make icons fully accessible to screen reader users, consider following these steps:

1. Focus on noticeability. Whether it is a decorative icon or a standard icon, if it can't be instantly perceivable to all users, it becomes inaccessible. This means that visitors shouldn't have to perform any extra action on your site in order to view the icon. 

2. Insert text labels. This is a safety measure worth investing in to ensure your icons are accessible to the widest range of users. To prevent unclear situations from arising, add a text label near any type of graphical icons you use on your site. 

3. Consider color contrast. If an icon's color contrast is too low, some users with vision loss might have trouble seeing it. Screen reader users need enough foreground-background color to easily notice your icons. 

4. Don't forget about the size. To be properly sized, icons must have around 44x44 pixels. Icon links must be treated with care as, if they're smaller than 44x44 pixels, they may become inaccessible on smaller devices. 

5. Make your icons are mouse, touchscreen, and keyboard accessible. If you're thinking of interactive icons, then you need to ensure that users can easily click on them, whether they use a mouse, keyboard, or touchscreen. 

Best practices for making icons accessible

How can you turn a standard icon into an accessible icon? Here are some useful tips to consider on this journey:

• Use the most popular pixel measurements and square dimensions. The most frequently used sizes for web icons are: 
  • 128x128
  • 16x16
  • 512x512
  • 64x64
  • 256x256
• Make linked icons accessible with ALT-text. For example, you can write 'Email us' as the ALT-text near your '@' email icon. 
• Use more SVG or PNG file formats. It's easier to make icons accessible with SVG icon systems or PNGs, and, as most designers advise, icon fonts should be avoided. 
• Adjust the icon-background color contrast properly. If you consider adding your web icon to the background, you need to adjust the color contrast accordingly. 
• Use a visible-hidden class selector for the text accompanying the icon. If you've inserted an explanatory text within your link icon, and you want it to be visible to screen readers only, a visible-hidden class selector is a solution. However, be careful that, by doing so, the click/touch area will be smaller, and some screen reader users might not understand what the icon does. 
• Insert visible text next to semantic icons. This is another safety measure to ensure that the meaning of your icons is 100% clear to all visitors. While semantic icons are standalone icons that have meaning, the safest way to make them visible to anyone is by accompanying them with visible explanatory text.
• Make icon fonts accessible. If you do decide to use icon fonts (try to avoid it as we discussed earlier), then add aria-hidden="true" to the element to ensure they are fully accessible. 
• Don't use ALT-Text to text-based icons. It's easy to see why you should avoid using an ALT text near a text-based icon, as it becomes unnecessary and might even confuse screen reader users. 

How to use icons efficiently within apps and online

The main goal of web icons is to quickly convey meaning for all types of users. However, if not used accordingly, icons can do more harm than good by being difficult to interpret. 

To avoid this, make sure you choose commonly used icons. For example, it is likely that most users will recognize the hamburger icon as the menu and the wheel icon as the settings. That's why, opting for popular, simple icons is more beneficial than using unusual ones. 

Another tip for efficiently using icons on your site is to be consistent in doing so. More exactly, give each icon on your website one meaning only. Using the same icon for different purposes will confuse your visitors and alter the user experience. 

Also, avoid using small icons as they can be challenging to understand, especially for users with visual impairments. A tiny decorative icon can also prevent users with limited fine motor skills from easily interacting with your site, and can also be hard to click on mobile device screens.

After implementing all these tips and best practices, you need feedback to see whether you're going on the right track or not. To ensure that the icon sizes and icon types used on your site are as clear and meaningful as possible for your audience, you need to test them with real end-users. 

Remote testing is one approach that can help you easily gather data on whether your icons are accessible or not from a large number of users.

Web accessibility as regulation and necessity

The legal requirements around web accessibility have become more complex in recent years. More emphasis is being put on making websites accessible for individuals with disabilities, and the fines for not doing so can be considerable. 

Web accessibility is not only beneficial for users, but also for companies.

What are the benefits of web accessibility for your business? From increased website traffic and online visibility to improved brand reputation and bigger customer base, the competitive advantages of making your website accessible are multiple. 

As the number of internet users is constantly on the rise, businesses need to develop and maintain innovative mindsets that promote inclusion and diversity. Proper access to all elements in a website for all users is no longer optional, but necessary. 

The rise of assistive technology usage requires optimized websites that take into consideration the needs of a wide range of internet users with various health conditions. Graphic icons can be a powerful way to enhance accessibility in apps and web pages if they are implemented with care. 

This means choosing which accessibility issues to prioritize based on the needs of your audience. Completing an accessibility remediation project requires a deep understanding of how your users interact with your website. When prioritizing, you also have to consider the direction of your business strategy, content, and website functionality. 

If you need help choosing the best approach to prioritization or making your website more accessible through optimized icons, drop us a line, and discover our Drupal Website Accessibility services. 

Photo credit: Harpal Singh on Unsplash.