Icons and alt text
Do icons need alt text? That depends on a few things. First, to level-set, when I say an icon, I mean a small image with some sort of imagery in it, symbolizing something, usually with simple line art and solid shapes, usually monochrome. You know, an icon. We all know what icons are. :)
Now, let's think about some different kinds of icons, their different uses, and different situations they may appear in — and what this means for alt text.
1. Does the icon have accompanying text next to (or above or below) it?
If the answer is no, that means you're probably communicating something with the icon itself — e.g. an Instagram or Facebook icon in a header or footer. In this case, the icon absolutely needs alt text, e.g. alt="Instagram".
If the answer is yes — there is accompanying text near the icon — then the question is, is this icon purely decorative for this section of content? Or is it communicating something? An example here would be an envelope icon next to the text link, "Contact us." The text link is doing the real work here; the icon is just decoration. My recommendation in this case is that you do not include alt text for the icon. Think about a user of screen reader software. If we include the alt text, "Envelope," the user will have to listen to that, and then the text next to it. So they'll hear, "Envelope. Contact us." What's the value in describing the image to this user? There isn't any; you're just slowing down the experience for them.
In the case of an icon where we choose not to include alt text, we should include alt="" (no space in there) and role="presentation" in the <img> tag, to hide the image from screen reader software completely.
I have a more in-depth article about alt text for decorative images if you want to check it out.
2. Is the icon a link?
If the icon is a link and it does not have accompanying text, then it absolutely should have alt text.
If the icon is a link and it does have accompanying text, then my recommendation is to program one link to contain both the icon image and the accompanying text, and not give the icon any alt text — just alt="" (no space in there) and role="presentation". Why put the two elements together in one link? Because if we were to program the icon and text as two separate links, this would create a clunky experience for users of screen reader software, and for users who navigate with their keyboard.
3. Is the icon conveying any useful information?
Example: The icon shows the text, "85%". The accompanying text says, "Most patients taking [Brand] showed significant improvement." In this case, of course we should include alt text that says, "85%." The icon is giving the user information.
If the icon shows the text, "85%," and the accompanying text says, "85% of patients taking [Brand] showed significant improvement," then of course the icon should not have alt text; just give it alt="".
Another example: The icon is a person with a question mark above their head. The accompanying text says, "FAQs." This icon does not need alt text. There's no value in telling screen reader users about this picture.
Avoid the words "icon" or "An icon of" in alt text
Alt text should never have the word "icon" in it. This gets flagged by accessibility testing software as a violation. (The same is true for the words picture, image, graphic, thumbnail, etc.)
I find that my copywriter colleagues and other digital media professionals are often tempted to include descriptive alt text for all imagery on a webpage. This is often overkill — and, in fact, in the case of purely decorative images like a divider graphic, the rule is that we should not include alt text for those images. Doing so would be a violation of WCAG guidelines. We need to ask ourselves, for each image, if including alt text will actually be useful to people with disabilities, or if we're just checking a box, trying to be fancy, etc. Let's make an effort to remember what alt text is for and who it's for; when we're being mindful of that it's (usually!) easy to get it right.
– Manning
Questions/comments? Feel free to contact me at manning@manningkrull.com. I update these articles pretty frequently — best practices evolve over time as the world of digital quickly changes, and I always welcome insights from others.