Skip to main content

Customer Experience and Design

How to Optimize Images for Screen Readers With Image Alt Tags

Should we use an alt attribute on all images?

The answer is simple. YES.

What if it is an image that is for decoration only?

YES! You should still be using an alt attribute.

If you are a web developer, you are likely aware of the SEO benefits of adding an alt attribute to images and that you need it to be HTML compliant. Most of us also understand that we are being good sentinels of the Internet by making our pages compliant and accessible. Even images that are seemingly unimportant need to have the alt attribute added.

Proper Protocol for Alt Attributes

The proper protocol is to add an empty alt attribute to an image. So the proper format is as follows:

<img src=”../awesome_image_directory/just-a-shadow-image.jpg”alt=”“>

If an image is only for decoration, consider adding it with CSS instead of an image file in the HTML. This, most often, prevents it from being an SEO issue and helps separate presentation from markdown, which is desirable.

Until recently, I followed protocol as best I could without really understanding why this might be important to people who use screen readers. So I decided it was time to really learn why and put myself in the shoes of a person who uses such a device.

3 Alt Tag Scenarios

Consider the following html snippets:

  1. <img src=”../awesome_image_directory/73453-w.jpg”>

  2. <img src=”../awesome_image_directory/73453-w.jpg” alt=“George Washington”>

  3. <img src=”../awesome_image_directory/73453-w.jpg” alt=”“>

(NOTE: Yes, this image file has a terrible name and I am only using it for the sake of this argument. Screen readers do vary in how they read and the output of each of these examples can be quite different).

  • Image Alt Tag 1: In the first example, a screen reader will read out the path of the image or ignore it, depending on the reader and the user settings. This implementation is incorrect and provides too much opportunity to provide the end user too little information or too much. The user may have to listen to extra noise that does not add value or miss out on some of the magic that the page might have.This example is incorrect and exclusionary. Plus, from a technical perspective, we have also created a bad HTML page. I really can’t tell just by looking at this img tag what this image is supposed to be because it lacks any specific information.
  • Image Alt Tag 2: The second image tag would be a standard implementation and is proper. While the image name still isn’t great, the alt attribute of “George Washington” should lead one to believe that it is a picture of the same man.
  • Image Alt Tag 3: The third image tag is also proper, but for different reasons. By adding an empty alt attribute, we are telling the browser that this image has no consequence to the page. We have told screen readers the same thing – with intention. Perhaps this is just a shadow image or some other decorative item that adds no semantic value to the page.

Many screen readers will identify this as such and completely ignore it, therefore not wasting the user’s time providing unnecessary information. By following this protocol, we can prevent some people from having to listen to the entire path of this nonsensical image name. Or, in a case where there are 50 such images, it will prevent the reading of 50 path names. How annoying would it be to listen to 50 nonsensical image names?

As a person who does not need a screen reader, I already think there is enough junk on the Internet. If I had to close my eyes and listen to all of the things on the page instead of being able to briefly scan over it, those 50 bad images with names like “73453-w.jpg” being read to me would quickly prompt my exit.

This is important for HTML compliance and for SEO. Just as importantly though, let’s be courteous to people who don’t use the Internet in the same way we might. Let’s make it just a little bit better for everybody.

Next time someone asks you if they need to add alt tags on website images, you’ll know the answer: YES!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Perficient Author

More from this Author

Follow Us
TwitterLinkedinFacebookYoutubeInstagram