The web gains its strength through diversification: the more accessible it is to everyone, the better the results. The
alt attribute was an early example of this, but writing good, accurate descriptive text for your images takes knowing a few rules:
alt represents the alternative text representation of an image. If an image fails to load or is blocked, the
alt value will appear in its place; for accessibility users, the text may be translated by a text-to-speech or text-to-Braille service.
alt is also useful for SEO, as it is part of what search engines use to determine the content of the image, and thus your site’s association with search terms.
alt attribute (commonly, but mistakenly, referred to as “the alt tag”) is required for every
<img> element on your site. In the majority of cases, the easiest way to compose
alt text is to write as if you’re trying to describe the image to someone. For example, the photograph at the top of this article could be described as:
<img src="singel.jpg" alt="Dusk in Jordaan, Amsterdam, North Holland">
Alternatively, and better:
<img src="singel.jpg" alt="A row of houses with lit windows along an Amsterdam canal">
As a general rule, more descriptive text is better.
alt Exceptions: Logos
If an image’s primary content is text, the rules change. Bitmap images that feature text “baked” into them, like this one:
…should have an
alt value that directly reflects the bitmapped text:
<img src="festa-del-rederentore.png" alt="Festa Del Rederentore, Venezia ~ Dal 1577">
The reason for this is simple: most screen readers can’t yet reliably recognize and translate bitmapped text, making it impenetrable to both search engines and the blind. By placing the text as an
alt value, you do the translation work for both.
This is also a very good reason to consider using inline SVG or markup for logos. Correctly built, the text in an SVG logo will be true text, and thus readable. It’s important to note that if the text was broken into SVG paths, the semantic value of the text is lost. An alternative (and perhaps better) solution would be to keep the graphic portion of the logo as SVG, and write the rest as styled markup. Of course, both options have to be weighted against the load time of an embedded font.
There are two conditions when
alt may be left blank:
The image is purely decorative, i.e. it has no informational value;
The image is effectively described by an appropriate semantic element immediately beside it: usually a
If you wish to keep your page valid,
alt should still be present for every image: to keep it blank, set
alt to the value of two quotes with no space between them:
<img src="flourish.png" alt="">
Alternatively, in HTML5 you can simply set the
alt attribute with no value:
<img src="flourish.png" alt>
There are rare occasions when the
alt value for an image may be very similar to its
figcaption. In that case, the
alt becomes redundant, and can be dropped:
<figure> <img src="rio-di-san-barnaba.jpg" alt> <figcaption>Photograph down the canal of the Rio di San Barnaba, Venice</figcaption> </figure>
The differences can be subtle:
alt describes an image, whereas
<figcaption> titles the content of a
<figure> element. In most cases, the two will be different, and both should be preserved:
<figure> <img src="doge-portrait.jpg" alt="Oil painting of an old man in a peaked cap and embroidered cloak"> <figcaption>Portrait of Doge Leonardo Loredan by Giovanni_Bellini</figcaption> </figure>
Don’t Confuse alt with title
You’ll sometimes find markup that applies the same text value to
title for a image. As a general rule, this is not a good idea; the popup tooltip text is hardly ever seen by users, as it takes several seconds to come up, and it won’t be encountered by accessibility users unless the element is focused.
Positioning of alt
As screenreaders will read
alt text inline with content, you should write your descriptive text in a way that flows with the content immediately around it, especially if the image is floated.
Don’t Neglect Other Media
alt is almost exclusively associated with images. This does not mean that descriptive text for other media formats on your site should be neglected: video and audio should feature WebVTT subtitles, for example.
Photograph by MorBCN, licensed under Creative Commons.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.