Linked image alt text should not describe the image

The title of this post might seem a little surprising. Isn't alternative text supposed to describe the image?

That's the concept that's drilled into us, and it's what most people think of when writing alt text. However, in some situations, it's actually wrong. One of those situations is when the image is serving as the visible content of a control, such as a link or button which does not also have a text label. In plain language, a linked image (most often).

In those situations, the image is what's known as a functional image. Its alt text becomes the text label of the control for non-sighted users on screen readers—in other words, the link or button text.

In this case, describing the image is absolutely useless. Why? Because link or button text needs to describe the purpose or destination of the link or control.

To take an example from a site I'm currently auditing (not picking on them as this is a very common issue): a linked image whose alt text reads "Canadian wilderness". A screen reader will announce that something like: "Canadian wilderness, graphic, link." What's your best guess as to what you'll find if you follow that link?

Whatever you guessed, it probably wasn't this: "A future worth voting for: Federal parties must offer bold solutions to environmental crises". That, however, is the text of the adjacent link which goes the same place as the image link.

To sum up:

• Linked images or images providing visible content for any type of control must have alt text which describes the control function or link destination, not the image itself.
• When you have more than one link to the same destination, particularly on the same page, consistency is important in the link text so users understand they go to the same place. This would mean making the alt text of linked images match (as far as possible) visible link text to the same destination.
• However, when you have text and image links to the same destination next to each other, best practice is to combine them into one link and put empty alt text on the image. This is to reduce redundancy for screen reader and keyboard users, and to avoid confusion. The image still needs to have the alt attribute, as do all images embedded using the <img> tag, but making it empty means screen readers will not announce the image at all. (This same technique must be used for purely decorative images as well). This results in the visible text being the only text announced for the link.