Alt text (alternative text) is an essential HTML attribute used to describe images for accessibility. It plays a crucial role in ensuring your images are understandable to users who rely on assistive technologies, such as screen readers, to navigate the web. However, there are common alt text mistakes that can hinder accessibility, and in this article, we’ll explore these errors and provide best practices for adding alt text to your images.

While alt text is relatively easy to implement, it’s not always used correctly. In this article, we’ll explore some common mistakes made when adding alt text to images, and provide guidelines for ensuring your images are accessible to all users.

Plase note: in my videos I am using MacOS’s own screen reader: VoiceOver. Other screen readers read the code slightly different.

The Common Mistake: Using Vague or Missing Alt Text

A common accessibility mistake is not adding an alt text or using generic descriptions, like the latest WebAIM’s 2024 Million report shows. Many images either lack alt text entirely or are described with vague, repetitive terms like ‘image’ or ‘graphic,’ pointing to a clear need for improvement in the correct usage of this attribute.

Let’s consider the following code snippet for a product card that includes an image element without an alt attribute:

<div className="product"> 
   <img src="/image_QXP2qhCN_1726748034386.jpg" /> 
   <h2>Stylish Backpack</h2> 
   <p>$45.99</p> 
</div>

This is how VoiceOver announces the image without alt attribute:

If the image has no alt attribute, VoiceOver will attempt to interpret the image’s purpose. In most cases, it ends up reading part of the image’s src path. Not only does the image path fail to provide a meaningful description, but it also results in both a confusing and unpleasant experience for the user.

Best practice: accessible image with meaningful alt attribute

Let’s consider the following code snippet for a product card that includes an image element with a descriptive alt attribute:

<div className="product"> 
   <img src="/image_QXP2qhCN_1726748034386.jpg" alt="A sleek black leather backpack with brown leather straps and metal buckles, designed in a modern, minimalistic style." /> 
   <h2>Stylish Backpack</h2> 
   <p>$45.99</p> 
</div>

This is how VoiceOver reads the image with alt attribute:

Now, a screen reader will announce the image with a meaningful description, helping users understand what the image represents. 

As you can see, including the word “image” in the alt text is unnecessary because screen readers already announce it as an image along with its description. Using phrases like “picture of” or “image of” adds no real value and can make the experience less efficient for users.

Writing a description for your image isn’t always straight-forward and takes some thought. Here’s a useful tip from  MDN:

When choosing alt strings for your images, imagine what you would say when reading the page to someone over the phone without mentioning that there’s an image on the page.

Best practice: decorative image with empty alt attribute

Not all images need alt text. Some images are purely decorative and do not add meaningful content to the page. For these images, it’s important to use an empty alt attribute to let screen readers skip them.

Let’s consider the following code snippet that displays a decorative image, i.e. an image with an empty alt attribute:

<div className="backpacks-section"> 
   <img src="/image_QXP2qhCN_1726748034386_raw.jpg" alt="" /> 
   <div> 
      <h2>List of available backpacks on sale:</h2> 
      <ul> 
         <li>Basic backpacks</li> 
         <li>Hiking backpacks</li> 
         <li>Fashionable backpacks</li> 
         <li>Tote backpacks</li> 
         <li>Laptop backpacks</li> 
         <li>Biking backpacks</li> 
      </ul> 
      </div> 
</div>

VoiceOver ignores the image with empty alt attribute (decorative):

 

If the alt attribute is empty (alt=""), it means the image is just for decoration. Screen readers like VoiceOver will recognise this and skip over the image, so users won’t hear extra noise and can focus on the important stuff.

Key Takeaways

• always add alt text to images: Descriptive alt text provides context and understanding for users who cannot see the images.
• be concise and relevant: Your alt text should be clear and to the point without unnecessary details.
• use empty alt text for decorative mages: Decorative images should have alt="" to prevent cluttering the experience for screen reader users.
• consider context: The alt text should reflect how the image fits into the content and its function on the page.

In this article, we have seen how important it is to always provide an alt attribute, either with a descriptive text or as an empty one. By following these alt text best practices and avoid common mistakes, you’ll ensure your images enhance the experience for all users, improving both accessibility and SEO.If you are ever unsure about whether or not to use an alt attribute on your images, this resource is a good starting point: An Alt Decision Tree