Alt text

Not everyone can see images on web pages. “Alt text” is a text field associated with an image on a web page.

Alt text describes the image for people who can’t see the image but can read the text (including people who are blind and use screen reader software and people using technology that can’t load the images).

Even if the image isn’t critical to understand the web page, not knowing what’s in the image can leave you wondering if you’re missing something. An image’s alt text should emulate the experience of seeing the image as much as possible with reasonably brief text.

Alt text is different than a caption. A caption is text that is shown in addition to the image (not instead of it) and typically appears below an image (whether the image itself or its alt text is shown).

Writing effective alt text

• Imagine you can’t see the image. What would you want to know to fill in the gap?
• Keep it short – think tweet-length or shorter
• Add information beyond the caption. People can also read the caption. The alt text replaces the visual of the image, not the caption below it.
• Think key takeaways. You can’t describe everything, so what’s most important to understand?
• Balance the literal with the significant. What’s the image showing that illustrates the point it’s making or the reason it’s in the story?
  • Too literal: “A blue house in the rain surrounded by trees with two people standing in front, a 42-year-old woman with brown hair and a 15-year-old teenage boy in a green shirt.”
  • Not literal enough: “Smith and her son say they are very happy here in spite of the weather.”
  • Balanced: “A middle-aged woman poses outside her house in the rain hugging her teenage son, both grinning at the camera.”
• Trust your audience – you don’t need to shoehorn in more information than is actually in the photo.
  • Example: If the specific city or the date of the photo aren’t apparent from looking at it, then they probably don’t need to be in the alt text. (If that’s important information, the caption is a good place for it).
• Stick to the visuals – in general, don’t go too far beyond what’s in the picture.
  • Example: unless someone’s a known politician, their name is probably better in the caption. Use the alt text to convey something visually important – what are they wearing? Where are they? Are they doing something important?

---

Examples

These are pulled somewhat randomly from recent stories on the web site.

The point is not that these alt text examples are brilliant writing (you can probably do better). These are just examples of what I come up with in one or two minutes on an image.

---

---

---

---

---