You might have seen it promoted as a 'best practice' often times on the internet. But setting the alt property on an <img tag should pretty much almost be mandatory in my opinion, at least most of the time. Because the alt attribute does much more than simply just show an alternate text when an image is broken.
The alt attribute not only acts as a placeholder text for when images fail to load, but it also helps screen readers dictate to visually impaired users what should be displaying on the screen and it helps search engines better categorize your content as well.
And in an age where images are the dominant communication tool online, there isn't a better time to make sure that they are there.
Here's a few more reasons though as to why you should pretty much always make sure to include an alternative description in all of your image elements. Almost always.
1. Accessibility
If you upload an image of a classic black Camaro onto your car blog, then the image speaks for itself often times.
Even search engines have gotten pretty good at recognizing images using advanced machine learning algorithms and such and most would have no trouble categorizing the image as a black car.
But not everyone will be able to partake in this image, for a variety of reasons. Some people suffer from limited vision, while others have to live their lives with no vision whatsoever. And some folks suffer from color blindness meaning that they will not be able to make out the exact hue of the image. And these folks tend to rely on technology to help them navigate online.
Alternate text is essentially what screen readers use to dictate to the user what's being shown on the screen as they navigate their way through the page.
And this can be hugely beneficial in helping to give these site visitors more context about the webpage and overall just a smoother and better browsing experience.
This can make coming up with an alternate text somewhat of a challenge though, as whatever you type must be relatively short yet give a thorough enough idea as to what the image entails. Take the following image for example:
Here is an example of a bad alt description:
<img src='laptop.png' alt='laptop' />
It's much too general and much too short and doesn't really give a good description as to what is on the screen. So here is an example of a slightly better one:
<img src='laptop.png' alt='laptop displaying code next to smartphone' />
It's not the perfect description, but it's better. And that's really the goal when coming up with alt descriptions. You can't fully capture what is happening on the screen, as that would make the text much too long and might be considered "spammy" to some engines.
2. Missing images
The main purpose of the alt property is really this. It's to show something to the user just in case the image is no longer being hosted anywhere, and thus just a small 'broken image' icon appears in its place. Here is a broken image for your viewing pleasure.
You may or may not see something above.
Depending on the browser, the user might have to either hover over the broken image or they will simply see the alternate text in a plain font displayed on the screen. Here is the same broken image with an alt description set:
In either case, it can help to give users a better understanding as to what they are suppose to be looking at. Because ideally, you really shouldn't have broken images and should work quickly to mitigate such issues.
Often times, developers will forego adding an alt tag simply to not show anything on the screen in case of a broken image. There are other ways however to handle this situation that don't involve excluding the alt attribute.
3. SEO
While not definitive, it probably doesn't hurt to categorize your images better so that search engines can better crawl and show them in your search results.
This is particularly helpful if you have decided to name your images with randomly generated names.
<img src="2f28f2fj28fj2foj2f.png" alt="cat" />
As mentioned, Google and other search engines definitely have advanced image recognition capabilities and they more or less can probably make out what they are seeing. But, this isn't a sure bet and some images can be hard to classify, even for advanced machine learning algorithms.
You shouldn't however attempt to stuff your alt tags with spammy keywords in the hopes that your images will rank higher. That can end up hurting more than helping your SEO case in the end.
Essentially, you need to find some kind of middle ground where your alt descriptions are long enough to give anyone reading them a generally good idea as to what they are seeing, without attempting to sound too spammy.
4. Your IDE will complain
At least "most" IDE's will probably give you some kind of warning letting you know that you left the alt attribute out.
And while not a huge deal, those warnings can very easily add up and clutter your build output.
Production level websites often have to deal with hundreds of images in general and skimping out on alt attributes here can lead to a headache down the road.
Note that avoiding the use of an alt attribute on an image is not invalid syntax. And IDE's can be configured to ignore this warning. But doing so can inevitably lead to more bad practices down the road and ignoring accessibility, usability and SEO will generally lead to a worse web browsing experience.
When do you not need to set it?
You just read through a few of the main reasons of why you should include alt tags in pretty much all of your images.
But there is one scenario when it might not make any sense, depending on how you've built your websites.
And that's when your image has no real contextual purpose, such as an icon or a placeholder image.
If for example, you have chosen to use an 'X' icon as your closing button and you have done so using an image tag, then you would want to avoid having an alt description as screen readers would read this text out load.
And if you have an icon heavy website (using images), then you can ruin the user experience for any visitor using a screen reading assistant.
Ideally, you wouldn't be using image files as icon and might instead opt for a font icon library or an <svg element. Both of which can scale better and avoid increasing the number of resources downloaded.
Walter Guevara is a software engineer, startup founder and currently teaches programming for a coding bootcamp. He is currently building things that don't yet exist.
Stay up to date
Sign up for my FREE newsletter. Get informed of the latest happenings in the programming world.