3 Common Alt Attribute Mistakes

Note: this post contains screen reader output examples. I want to make it clear that outputs vary depending on browser, operating system and screen reader combinations. The examples in this post are simply meant to give readers an idea of how HTML is generally interpreted by screen readers.

Including redundant alt text

The problem

For example, the following code snippet includes a redundant alternative text that can confuse more than it helps:

<a href="/blog">
  <span>Read my blog</span>
  <img src="/icons/arrow-right.svg" alt="arrow right icon">
</a>

A screen reader would announce something like:

“Read my blog arrow right icon link”

In this case, the “arrow right icon” alternative text does not aid in understanding the purpose of the link, it might even have the opposite effect. The icon is simply a visual aid and becomes redundant when interpreted by screen readers and other assistive technology (AT).

The solution

To hide the image from screen readers and AT, it can simply be left empty. Like so:

<a href="/blog">
  <span>Read my blog</span>
  <img src="/icons/arrow-right.svg" alt="">
</a>

A screen reader would now simply announce:

“Read my blog link”

A bit cleaner, don’t you think?

Using the filename as the alt text

The problem

Consider the following example as part of a blog post:

<p>Some text explaining something and an image below illustrating it.</p>
<img src="/images/the-explanation-of-something.jpg" alt="the-explanation-of-something.jpg">

Guess what a screen reader would announce… Yes, the filename including the dashes and the file extension. Like so:

“the-explanation-of-something.jpg graphic“

Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not alternatives (e.g., filenames or placeholder text)

The solution

As developers, we can only ensure that the web editors have the ability to add alternative text to images. It is then up to the organization to train the web editors in when to use and how to properly write alternative text for images.

Neglecting alt text in icon buttons

It is fairly common to create buttons that only consist of an icon. Like the traditional hamburger menu.

The problem

Icon buttons are often built like the following example.

<button onclick="toggleMenu">
  <img src="/icons/hamburger.svg">
</button>

A screen reader would announce something like:

“button unlabeled graphic”

The solutions

To correctly mark up icon buttons, we need to include an accessible name for the button. There are a few ways to do this, but I’m going to demonstrate three ways to achieve this.

Adding alternative text to the image

<button onclick="toggleMenu">
  <img src="/icons/hamburger.svg" alt="open menu">
</button>

It is worth noting that when alternative text is used like this, it becomes the accessible name of the button. This means that it would be confusing to describe the contents of the image. Instead, we simply describe the action that the button performs.

A screen reader would announce something like this:

“open menu graphic button”

Notice how the word “graphic” is included in the output. Isn’t that a bit redundant? Well… yes!

Adding an aria-label attribute

<button onclick="toggleMenu" aria-label="open menu">
  <img src="/icons/hamburger.svg" alt="">
</button>

This will cause assistive technology to ignore the image element. A screen reader would instead announce something like this:

“open menu button”

Adding an aria-labelledby attribute

<div>
  <span class="popover" id="hamburger-popover">Open menu</span>
  <button onclick="toggleMenu" aria-labelledby="hamburger-popover">
    <img src="/icons/hamburger.svg" alt="">
  </button>
</div>

This means that we have set the accessible name of the button to the content of the pop-over.

Conclusion

Thank you for reading.