typestar

What to write in alt in HTML

The alt text is what the image says, not what the image is.

<!-- Informative: say what it shows -->
<img src="/img/chart.png" width="600" height="300"
     alt="Typing speed rose from 48 to 71 words per minute over 30 days">

<!-- Decorative: say nothing, deliberately -->
<img src="/img/flourish.svg" alt="" width="120" height="12">

<!-- Functional: describe the destination, not the picture -->
<a href="/">
  <img src="/img/logo.svg" alt="typestar home" width="96" height="24">
</a>

How it works

  1. Describe the information the image carries, in the sentence's context.
  2. A decorative image takes alt="", which tells a reader to skip it.
  3. A missing alt attribute is different: the reader falls back to the filename.

The run, in numbers

Lines
11
Characters to type
419
Tokens
58
Three-star pace
70 tpm

At the three-star pace of 70 tokens a minute, this run takes about 50 seconds.

Type this snippet

Step 3 of 4 in Start with the right element, step 3 of 15 in Accessible HTML.

← Previous Next →