CODEWITHSUNDEEP
htmlaccessibilityscreen-readers
Michael Swarts
Michael Swarts

Reputation: 3921

Does it make sense to provide alt text for labelled icon images?

Alt text for images is HTML 101, but does it make sense when that alt text would be the same as a label immediately following it? To me, it seems redundant for people using screen readers to hear it twice. Here's an example just so it's abundantly clear:

<nav>
  <ul>

    <li>
      <a href="/chameleons.html">
        <img src="chameleons_icon.png" alt="chameleons">
        Chameleons
      </a>
    </li>

    <li>
      <a href="/beardies.html">
        <img src="beardies_icon.png" alt="beardies">
        Beardies
      </a>
    </li>

    <li>
      <a href="/basilisks.html">
        <img src="basilisks_icon.png" alt="basilisks">
        Basilisks
      </a>
    </li>

    <li>
      <a href="/iguanas.html">
        <img src="iguanas_icon.png" alt="iguanas">
        Iguanas
      </a>
    </li>

  </ul>
</nav>

Thanks for your input!

Amendment: For the sake of validation, should I just use alt="" or should I use background images?

Upvotes: 3

Views: 4840

Answers (2)

BoltClock
BoltClock

Reputation: 723428

Section 4.7.1.1 of W3C HTML5 has a pretty huge list covering many common use cases of the img element and its alt attribute.

Your use case appears to be that of "A graphical representation of some of the surrounding text." Here's what the spec says:

In many cases, the image is actually just supplementary, and its presence merely reinforces the surrounding text. In these cases, the alt attribute must be present but its value must be the empty string.

In general, an image falls into this category if removing the image doesn't make the page any less useful, but including the image makes it a lot easier for users of visual browsers to understand the concept.

Therefore the alt attribute can (and, in fact, must) be empty in your case, as the images are merely there to support text that's already part of the main content and as you've stated, duplicating the content would be unnecessary and obtrusive:

<li>
  <a href="/chameleons.html">
    <img src="chameleons_icon.png" alt="">
    Chameleons
  </a>
</li>

You could take this one step further and mark everything up using a figure and figcaption, eliminating the need for an alt attribute altogether as the alt text is then provided via the figcaption:

<li>
  <a href="/chameleons.html">
    <figure>
      <img src="chameleons_icon.png">
      <figcaption>Chameleons</figcaption>
    </figure>
  </a>
</li>

For the sake of validation, should I just use alt="" or should I use background images?

A validator can't tell you if having an empty alt attribute is appropriate; it can only tell you if you've left out an alt attribute that is required in that context.

So this comes down to the nature of your content, or even personal preference. If the image is a meaningful part of your content it's highly recommended that the image be included in the markup; background-image is intended for decorative visuals. But it's really up to you.

Upvotes: 8

zilong-thu
zilong-thu

Reputation: 68

This is kind of a user-experience-design problem.

Attribute alt is designed in old days when the network bandwidth is quite small, to describe the content of the image once it fails to load.

Understanding this, the alt attribute is not necessary here, especially when it duplicates the label text.

But it would cause problem if the images fail to load. Here are some alternative methods that can fix this.

First choice is, consider using background-image as the <a> tag instead of inserting an image inside it. No ugly image would ever appear. And better to try CSS Sprites.

Here is the code if you do not use CSS Sprites.

CSS:

a.nav-icon {
  display: inline-block;
  padding-left: 24px; /* use the width of your image */
  background-repeat: no-repeat;
}
a.nav-icon-chameleons {
  background-image: url(chameleons_icon.png);
}

HTML:

<a class="nav-icon nav-icon-chameleons" href="/chameleons.html">
  Chameleons
</a>

Another choice, which is much popular in these days, is using SVG, or font icons. See http://fontawesome.io/ if you could find some icons that would help.

Upvotes: 0

Related Questions