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

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.

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

Blank alt

There are two conditions when alt may be left blank:

<img src="flourish.png" alt="">

<img src="flourish.png" alt>

<figure>
	<img src="rio-di-san-barnaba.jpg" alt>
	<figcaption>Photograph down the canal of the Rio di San Barnaba, Venice</figcaption>
	</figure>

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