Alt Text for Icons
While revamping my GitHub README.md file, I included a lot more icons than I expected and started to wonder—should I be adding alt text to my decorative icons in GitHub (and any other place, for that matter)?
In case you’re unsure what alt text is, its an attribute of the <img> HTML element used by screen-readers and similar devices to describe images.
The Answer
Yes, you should pretty much always put an alt tag whenever possible, but there are some nuances (there’s always a nuance). Here’s the gist of it:
-
If the icon has some sort of action or function associated with it, then the alt text should explain the action, like: “Edit User” instead of “Pencil Icon.”
-
If the icon is purely descriptive (doesn’t have an associated action or function), then you should still add an alt text but it should be blank, like this:
alt="".
Best Practices
Now you may be wondering, what is the difference between having a blank alt text alt="" and no alt text associated with an image?
With screen readers, adding a blank alt text (also known as a “null alt attribute”), will explicitly tell screen readers to skip an image.
On the flip side, not adding the blank attribute could have different effects based on different screen readers, with some still announcing that there’s an image but that it lacks a description, which can be seriously distracting for those users. Thats why its also important to have succinct and non-repetitive alt texts in general!
Well, I hope you enjoyed our lesson in Web Accessibility. ‘Til next time!
