Alternative Text for Images

The Decision Tree

Writing alt text is an art, but the logic is binary.

1. Is the image decorative? (e.g., background pattern, flourish)

   • Yes: Use empty alt attribute (alt="") to hide it from screen readers.
   • No: Proceed to step 2.

2. Is the image a link or button?

   • Yes: The alt text must describe the destination or action, not the visual (e.g., "Search", not "Magnifying glass").

3. Is the image informative?

   • Yes: Describe the specific info conveyed. If text is in the image, transcribe it verbatim.

Examples

Good (Informative): <img src="chart.png" alt="Bar chart showing 20% growth in Q4 sales compared to Q3." />

Good (Decorative): <img src="divider.png" alt="" />

Bad (Redundant): <img src="dog.png" alt="Image of a dog" /> (Screen readers already announce "Image").

Bad (Missing): <img src="logo.png" /> (Screen readers may read the filename, e.g., "logo-v2-final.png").