Material icons, flat icons, thin icons, ready-made or fully custom, on-brand icons... No matter what type of web icons you opt for, the same rule applies: the need to be visible to all users. So, you ask yourself: "How to make icons accessible to... everyone?".
For, in vain you go with an eye-catching web icon design if its color contrast is so low that some users just don't see it.
Or if it's interactive, but only when... mouse clicked.
See my point?
Therefore, in today's post I'll tackle aspects like:
- what accessible icons are
- what goes into making icons accessible: most effective approaches and best practices
- what are the different types of web icons and the specific techniques for making them accessible
Let's dive in:
1. What Are Accessible Icons More Precisely?
What makes an icon accessible to screen reader users?
What requirements should it meet to be fully inclusive?
Here are the 6 most important things to consider when you're designing accessible icons:
1.1. Make Them Noticeable
For, it's pretty logical:
If an icon's not instantly perceivable to all visitors, it becomes inaccessible.
And by "instantly perceivable", I mean that users shouldn't be constrained to perform some sort of action in order to make the icon... visible.
1.2. If It's Purely Decorative, It Shouldn't Be Read Out
One of the best practices for designing accessible icons (decorative icons) is to skip the part where the ALT text gets read out to screen reader users.
That's because, in the case of a decorative icon, informing the user about its existence on the page (e.g. "There is a key icon!") is just... superfluous.
Which leads us to the next requirement that all "wannabe accessible" web icons should meet:
1.3. Always Add a Text Label
The magnifying glass icon is universally recognized as a "search" tool.
But that's the only universally recognizable icon...
Therefore, it's best to play safe if you want your icons to be accessible to the widest range of visitors.
Whether you have a hamburger menu icon or a house-shaped one, accompany it with a text label to prevent any ambiguity.
1.4. Keep in Mind the Color Contrast
This is one of the recommendations on top of any "How to make accessible icons" list that you might stumble upon:
Make sure there's enough foreground-background color constrat in your icons, so that visitors with different levels of visual imparirment can easily notice them.
1.5. Make Sure They're Properly Sized
And by "properly sized" I mean somewhere around 44x44 pixels.
Pay particular attention to the size in the case of icon links:
Any smaller than 44x44 pixels and they become inaccessible on smaller devices: some users won't be able to click on them.
1.6. Make Sure They're Mouse, Touchscreen, AND Keyboard Accessible
Have you decided to "sprinkle" some interactive icons across your website?
Then make sure that users can easily click on them whether they use their mouses, they tap on their touchscreens or they depend on their keyboards for that.
2. How to Make Icons Accessible: 10 Approaches & Best Practices
Now that we've gone through "what" makes an icon accessible, let's get to the "how-to" part:
How can you make your web icons more accessible for screen readers users?
Here's a list of simple approaches and valuable tips to consider:
2.1. Consider Pixel Measurements and Square Dimensions
Most icons have square dimensions.
And if you're curious which are some of the most frequently used sizes for web icons, here are some popular examples:
- 128x128
- 16x16
- 512x512
- 64x64
- 256x256
2.2. The Easiest Way to Make Your Linked Icons Accessible Is to...
... add an ALT-text that lets the user know what the link does. What its destination is.
For instance, you can add "Email us" as the ALT-text accompanying your "@" email icon.
2.3. When In Doubt, Choose an SVG or a PNG File Format
Even if some prefer the SVG icons systems, while others choose to go with PNGs (making icons accessible is easier with that file format), all web designers agree on this:
Icon fonts should be the very last option to consider.
2.4. Make Sure Your Document and Your Icon Are The Same Size
2.5. See that There's Enough Icon-Background Color Contrast
Will you be adding your web icon to a background?
If it's a yes, then check and adjust the color contrast.
2.6. Check Your Icon's Size Before Exporting It
The 6th tip on our "How to make icons accessible" is pretty... predictable:
All web icons should be properly sized prior to export, making sure they're not too large.
2.7. Hide the Text Accompanying the Icon, but Keep It Visible to Screen Readers
Let's say that you've inserted an explanatory enough copy text within your link icon, but you don't want it to be visible to all users.
You want it to be visible to screen readers only.
For this, you can use a visible-hidden class selector.
Word of caution! Going with this solution does call for 2 compromises:
- the click/touch area is smaller
- screen reader users might not understand what that icon does (the VoiceOver will then read something like: "internal link, home").
2.8. Accompany Your Semantic Icons with Visible Text to Avoid Ambiguity
"What's a semantic icon?" you ask?
A standalone icon that has meaning.
Now, if you want to make sure you'll prevent all situations where users might just overlook it, just add a visible "Menu" text next to it. This way, its meaning will be 100% clear to anyone.
2.9. The Simplest Way to Make Icon Fonts Accessible Is...
... to add aria-hidden="true" to the element.
Note: again, whenever possible, avoid icon fonts and opt for inline SVGs instead.
2.10. Skip Adding ALT-Text to Text-Based Icons
Let's say that you have an "Email Us" linked icon.
Now, it would be quite superfluous to have an ALT text added to, saying the same thing to the screen reader user, wouldn't it?
In this case, the icon is purely decorative, since the copy text around it already conveys the meaning on its own.
The END!
Now you have at least 10 different answers to your "How to make icons accessible to the widest range of users" question.
But maybe you need help choosing the best approach and implementing these best practices in order to make your brand icons more accessible.
We're here to help!
Just drop us a line and let's find the most suitable solution for making your web icons available to everyone visiting your website.
Image by Виктория Бородинова from Pixabay
