"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.