In 2022 do we still need so many icons and how can we make them accessible with aria labels
Do we still need to use so many icons in 2022?
Around 2015, in the web builder design world, we all got very excited about using the latest Font Awesome icons. I recall there were around 450 of them to start with, and we were perfectly willing to overlook their blocky appearance and the fact than many were different sizes and not all were lined up as well as they could be. New versions with 1000’s of icons appeared over time as F5, F6, etc., with more attention to the details, but it is still those, blocky FA4 symbols that many web designers still use today. They are used mainly because their page builder software uses them or because they can be added into code with relative ease and avoid the need to sign up to a Pro level monthly recurring icon service.
If you decide to use an icon, then consider using an SVG image instead of the Fontawesome icon (or other). In most web builder Apps, if you use just one Fontawesome icon, then the whole set of icons are downloaded in a file or multiple versions of that file. These icon files can be significantly large enough to slow your site down enough for Google to report it. Using an SVG image instead of an fa-icon avoids this. SVG icons are tiny and you can choose from the many web resources that allow you to download and use them. For example this icon site.
However, just because we can add an icon, doesn’t mean that it is good practice or even the best thing to do, and it might confuse the page visitor if they don't recognise the icon. Some icons certainly make sense such as many of the social media services, such as the Instagram icon. Adding an Instagram icon to a page makes sense because any user of Instagram will recognise the Icon. If a user doesn't recognise Instagram, they wil almost certainly not understand what it is even if it was written as Instagram. There is little need to add the text “Instagram” alongside the icon and take up additional screen space. Similarly for Twitter, TikTok, etc..
In 2015 we started adding icons next to text inside buttons and even setup dual colour foreground and background with normal and hover colours. Do we even need an envelope icon next to the word Email? Why not just use a text link showing the obfuscated email address without any icon. It’s a similar situation with adding a telephone icon next to a telephone number. In 2022, we are pretty much smart enough to recognise a telephone number for what it is, and will expect that we can click or tap on it to make the call.
Where icons certainly don’t make sense, is where they don’t convey the meaning of the icon. There are many examples, but chevrons, directional arrows, icons such as a cloud icon with a wide arrow pointing up or down, etc..
- Potentially don’t communicate what they do, to everyone
- Add visual clutter and take up space
- Highlight that the design was created in the last decade or has not been recently, although, in truth, most won't notice becasue we are so used to seeing them.
It would be far better to use a text link instead of that blocky ambiguous icon. E.g. instead of the cloud with the fat arrow icon, just use the text “Download file”. We got used to using down pointing chevrons or arrows to show the 2015 page viewer, that they needed to scroll down. In 2022, we all know about this and don’t really require those arrows.
To fix these icons that have no obvious visual meaning, we should add an
aria-label to each of the icons, to describe what the icon does if you click or tap it. For those with poor, impaired or no eyesight, these icons need a label so that screen readers can work out what they do. What goes in the
aria-label is what the screen reader reads out.
This is where we should be adding an
aria-labeldescription into the link information to each icon to describe their function. E.g. a down pointing chevron could have the
aria-labelset to ”Continue to next section about contact details” or “Go to contact details”.
Google’s PageSpeed Insights is now flagging these links and icons that don’t have aria-labels in their Accessibility section.
The Firefox browser has a very useful Accessibility tool, inside their Inspector tools, that allows you to check each icon to see what information is provided to Screen readers.
P.S. Yes there are 2 icons used at the top of this page, but they are loaded as a tiny subsetted fa-subsetted-file, the Twitter one makes visual sense but the other one is fa4's best vaguely looks like a link icon and unfortunately I was unable to use SVG's in this instance.