DEV Community

Cover image for Do icons need alt attributes?
Nadia Rasul
Nadia Rasul

Posted on

Do icons need alt attributes?

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

Collapse
 
moopet profile image
Ben Sinclair

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!

Collapse
 
doctorderek profile image
Dr. Derek Austin 🥳

Agreed! It doesn't seem particularly hard to include a label in a lot of UI designs. Like Menu 🍔 instead of just 🍔

Collapse
 
michael_gustafson_900c6ce profile image
Michael Gustafson

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?

Collapse
 
nadiarasul profile image
Nadia Rasul

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.