"Hey Nadia - do icons need alt attributes?" When I got this question from a colleague a few days ago, my first instinct was to say, "it depends". Of course, I then went on to explain what it depends on, but I also realized that I get this question often enough for the answer to be turned into an easily shareable short post.
So, does an icon need an alt attribute? Well, it depends on how the icon is being added to the page and what the purpose of that icon is.
If an icon is added using an inline image element, it must have an alt attribute. The value of that alt attribute can be a string of text (<img src="icon.png" alt="Get more information" />) or an empty value (<img src="icon.png" alt="" />) in case it’s a decorative icon, but it absolutely must have an alt attribute.
If the icon is added through CSS, it will never actually have an “alt attribute” as alt attributes are used on an <img> element. The icon can still, however, have a text alternative or a text equivalent to provide context for users.
An icon added through CSS for purely decorative purpose, for example, a fancy bullet list icon, doesn’t need any text alternative to provide more context or information to the user.
On the other hand, a when an icon added through CSS is functional (e.g. a magnifying lens to activate search) or provides some sort of information to the user (e.g. a check mark or an x to depict which features are included in a product), you need to include a text alternative. The text alternative in this case is not added through an alt attribute. It could just be a contextual text either accompanying the icon on the page or it could be a visually hidden string made available to screen reader users.
But, why do you need any alt text at all on icons? Because icons on their own may not be enough to give users context. For example, when you create an icon button for a hamburger menu or search, screen reader users with no or low vision will have no idea what that button does when they land on it unless there is some text there to tell them the purpose of that button.
Screen reader users aren't the only people who need accessible icons. Most icons and symbols without any accompanying text can be just as confusing for persons with cognitive disabilities or someone who lacks the cultural context. Including text alternatives or alt text to your images is one of the simplest and quickest way of making your website usable and accessible.
And finally, if you’re still not convinced and need one more reason to include appropriate text alternatives for your icons, it's a great SEO win as well. Search engines, such as Google, give pages that include alt text in images high importance when indexing websites.
--
Have a question? Feel free to ask in the comments below or on twitter.
Top comments (4)
I have difficulty identifying what a lot of icons are supposed to mean anyway.
I wish designs would include the text on the link or button itself. I hate having to hover over every button in a toolbar or menu for a second to find out what it does!
Agreed! It doesn't seem particularly hard to include a label in a lot of UI designs. Like Menu 🍔 instead of just 🍔
I think you can divide icons in at least two categories, clickable and not clickable icons.
I do understand if a screen reader lands on a clickable link-icon and the need for an alt text. But what about the not clickable ones?
Even if it's a non-clickable icon, it might still be there for giving some kind of information. In that case, it would need to have an alt text unless you have visible text right next to it that gives the same information.
Also, we have to remember that not all people who are using a screen reader have complete vision loss. If someone has partial vision and they can see somewhat see an icon or image on the page, they might still want to know what that element is.