Alt Text: Why Getting It Right (or Wrong) Matters

TL;DR

  • Always use the alt attribute: Without it, screen readers might read out the image URL as alt text, disrupting the experience for screen reader users;
  • For decorative images, use an empty value for the alt attribute (alt="") to ensure they are ignored by screen readers;
  • For informative images, use the alt attribute with a clear and concise description to convey their content.

Images are crucial to the web, helping us express ideas, illustrate concepts, and enhance visual appeal. However, not all users experience images in the same way. For those who rely on assistive devices,like screen readers or speech input devices, the alt attribute (or alternative text) is vital in conveying what an image represents. Without it, essential information might be lost.

Through this article, I want to help my fellow developers and content creators understand what it means for screen reader users when we don’t properly use the alt attribute.
Plase note: in my videos I am using MacOS’s own screen reader: VoiceOver. Other screen readers read the code slightly different.


❌ Inaccessible image without alt attribute

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

<span class="line"><span style="color: #F8F8F2"><</span><span style="color: #FF79C6">div</span><span style="color: #F8F8F2"> </span><span style="color: #50FA7B; font-style: italic">className</span><span style="color: #FF79C6">=</span><span style="color: #E9F284">"</span><span style="color: #F1FA8C">product</span><span style="color: #E9F284">"</span><span style="color: #F8F8F2">></span></span>
<span class="line"><span style="color: #F8F8F2">  <</span><span style="color: #FF79C6">img</span><span style="color: #F8F8F2"> </span><span style="color: #50FA7B; font-style: italic">src</span><span style="color: #FF79C6">=</span><span style="color: #E9F284">"</span><span style="color: #F1FA8C">/image_QXP2qhCN_1726748034386.jpg</span><span style="color: #E9F284">"</span><span style="color: #F8F8F2"> /></span></span>
<span class="line"><span style="color: #F8F8F2">  <</span><span style="color: #FF79C6">h2</span><span style="color: #F8F8F2">>Stylish Backpack</</span><span style="color: #FF79C6">h2</span><span style="color: #F8F8F2">></span></span>
<span class="line"><span style="color: #F8F8F2">  <</span><span style="color: #FF79C6">p</span><span style="color: #F8F8F2">>$45.99</</span><span style="color: #FF79C6">p</span><span style="color: #F8F8F2">></span></span>
<span class="line"><span style="color: #F8F8F2"></</span><span style="color: #FF79C6">div</span><span style="color: #F8F8F2">></span></span>

This is how VoiceOver reads the image without alt attribute:

If the image has no <strong>alt</strong> attribute, VoiceOver will attempt to interpret the image’s purpose. In most cases, it ends up reading part of the image’s <strong>src</strong> 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.


✅ Accessible image with meaningful alt attribute

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

<span class="line"><span style="color: #F8F8F2"><</span><span style="color: #FF79C6">div</span><span style="color: #F8F8F2"> </span><span style="color: #50FA7B; font-style: italic">className</span><span style="color: #FF79C6">=</span><span style="color: #E9F284">"</span><span style="color: #F1FA8C">product</span><span style="color: #E9F284">"</span><span style="color: #F8F8F2">></span></span>
<span class="line"><span style="color: #F8F8F2">  <</span><span style="color: #FF79C6">img</span><span style="color: #F8F8F2"> </span><span style="color: #50FA7B; font-style: italic">src</span><span style="color: #FF79C6">=</span><span style="color: #E9F284">"</span><span style="color: #F1FA8C">/image_QXP2qhCN_1726748034386.jpg</span><span style="color: #E9F284">"</span><span style="color: #F8F8F2"> </span><span style="color: #50FA7B; font-style: italic">alt</span><span style="color: #FF79C6">=</span><span style="color: #E9F284">"</span><span style="color: #F1FA8C">A sleek black leather backpack with brown leather straps and metal buckles, designed in a modern, minimalistic style.</span><span style="color: #E9F284">"</span><span style="color: #F8F8F2"> /></span></span>
<span class="line"><span style="color: #F8F8F2">  <</span><span style="color: #FF79C6">h2</span><span style="color: #F8F8F2">>Stylish Backpack</</span><span style="color: #FF79C6">h2</span><span style="color: #F8F8F2">></span></span>
<span class="line"><span style="color: #F8F8F2">  <</span><span style="color: #FF79C6">p</span><span style="color: #F8F8F2">>$45.99</</span><span style="color: #FF79C6">p</span><span style="color: #F8F8F2">></span></span>
<span class="line"><span style="color: #F8F8F2"></</span><span style="color: #FF79C6">div</span><span style="color: #F8F8F2">></span></span>

This is how VoiceOver reads the image with alt attribute:

If the image has an alt attribute, VoiceOver reads the description in the alt attribute, allowing visually impaired users to understand the image content.

Rule of thumb, taken 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. This approach helps ensure your descriptions are clear and useful.

Please note: It’s a common practice to include words like ‘picture’ or ‘image’ in the alt description. However, this is redundant because screen readers already announce the element’s role as an image after reading its description.


✅ Decorative image with empty alt attribute

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

<span class="line"><span style="color: #F8F8F2"><</span><span style="color: #FF79C6">div</span><span style="color: #F8F8F2"> </span><span style="color: #50FA7B; font-style: italic">className</span><span style="color: #FF79C6">=</span><span style="color: #E9F284">"</span><span style="color: #F1FA8C">backpacks-section</span><span style="color: #E9F284">"</span><span style="color: #F8F8F2">></span></span>
<span class="line"><span style="color: #F8F8F2">  <</span><span style="color: #FF79C6">img</span></span>
<span class="line"><span style="color: #F8F8F2">    </span><span style="color: #50FA7B; font-style: italic">src</span><span style="color: #FF79C6">=</span><span style="color: #E9F284">"</span><span style="color: #F1FA8C">/image_QXP2qhCN_1726748034386_raw.jpg</span><span style="color: #E9F284">"</span></span>
<span class="line"><span style="color: #F8F8F2">    </span><span style="color: #50FA7B; font-style: italic">alt</span><span style="color: #FF79C6">=</span><span style="color: #E9F284">""</span></span>
<span class="line"><span style="color: #F8F8F2">  /></span></span>
<span class="line"><span style="color: #F8F8F2">  <</span><span style="color: #FF79C6">div</span><span style="color: #F8F8F2">></span></span>
<span class="line"><span style="color: #F8F8F2">    <</span><span style="color: #FF79C6">h2</span><span style="color: #F8F8F2">>List of available backpacks on sale:</</span><span style="color: #FF79C6">h2</span><span style="color: #F8F8F2">></span></span>
<span class="line"><span style="color: #F8F8F2">    <</span><span style="color: #FF79C6">ul</span><span style="color: #F8F8F2">></span></span>
<span class="line"><span style="color: #F8F8F2">      <</span><span style="color: #FF79C6">li</span><span style="color: #F8F8F2">>Basic backpacks</</span><span style="color: #FF79C6">li</span><span style="color: #F8F8F2">></span></span>
<span class="line"><span style="color: #F8F8F2">      <</span><span style="color: #FF79C6">li</span><span style="color: #F8F8F2">>Hiking backpacks</</span><span style="color: #FF79C6">li</span><span style="color: #F8F8F2">></span></span>
<span class="line"><span style="color: #F8F8F2">      <</span><span style="color: #FF79C6">li</span><span style="color: #F8F8F2">>Fashionable backpacks</</span><span style="color: #FF79C6">li</span><span style="color: #F8F8F2">></span></span>
<span class="line"><span style="color: #F8F8F2">      <</span><span style="color: #FF79C6">li</span><span style="color: #F8F8F2">>Tote backpacks</</span><span style="color: #FF79C6">li</span><span style="color: #F8F8F2">></span></span>
<span class="line"><span style="color: #F8F8F2">      <</span><span style="color: #FF79C6">li</span><span style="color: #F8F8F2">>Laptop backpacks</</span><span style="color: #FF79C6">li</span><span style="color: #F8F8F2">></span></span>
<span class="line"><span style="color: #F8F8F2">      <</span><span style="color: #FF79C6">li</span><span style="color: #F8F8F2">>Biking backpacks</</span><span style="color: #FF79C6">li</span><span style="color: #F8F8F2">></span></span>
<span class="line"><span style="color: #F8F8F2">    </</span><span style="color: #FF79C6">ul</span><span style="color: #F8F8F2">></span></span>
<span class="line"><span style="color: #F8F8F2">  </</span><span style="color: #FF79C6">div</span><span style="color: #F8F8F2">></span></span>
<span class="line"><span style="color: #F8F8F2"></</span><span style="color: #FF79C6">div</span><span style="color: #F8F8F2">></span></span>

VoiceOver skips 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.

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.
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

Leave a Comment

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

Scroll to Top