Images Without Secrets: The Complete Guide to Writing Effective Alt Text

"Which filename would you want a screen reader to read aloud in your ear 40 times a day?" It's a slightly absurd question, but it's exactly what happens when a meaningful image is left with alt="image1.jpg" or, worse, no alt text at all. This article is a practical guide to writing alt text that actually helps — not just present, but good.

Why Bad Alt Text Is Almost as Bad as Missing Alt Text

Under WCAG 1.1.1, all non-text content must have a text alternative — but the formal requirement is only half the story. "image1.jpg," "image," or "logo" technically meet the requirement (there's an alt attribute), but they convey no real information. A screen-reader user who hears a string of "image... image... image23.png" is no less frustrated than a sighted user looking at a series of empty frames.

How to Write Good Alt Text

The guiding rule: describe the image's message in the context where it appears, not a literal description of what you see. A photo of people around a table in a team meeting, accompanying an article about collaboration, could be given "Team working together around a table" — not "Photo of people." For a chart or graph, describe the takeaway the chart presents: "Bar chart showing a 40% increase in sales in the third quarter" is significantly better than "Bar chart."

• Short and purposeful — usually 1–2 sentences are enough; there's no need to describe every visual detail.
• Skip "image of" or "picture of" — the screen reader already announces that it's an image, so there's no need to repeat it.
• Consider the surrounding text — the same image can get different alt text in different contexts.

When to Leave Alt Text Intentionally Empty

Not every image needs a description. Purely decorative images — graphic dividing lines, background illustrations, icons that just repeat nearby text — are best tagged with alt="" (empty alt text, not missing) so the screen reader skips them entirely. The difference between "missing" and "intentionally empty" is critical: missing sounds like an error or reads out the filename; intentionally empty simply skips over it silently.

What to Do with Complex Charts and Diagrams

For a complex data chart, an illustrated comparison table, or an infographic with several layers of information, short alt text isn't enough — there's too much information to convey. The solution: short alt text that describes the general topic, alongside it (in the regular text surrounding the image, not only in the alt attribute) a more detailed description of the important data, or an equivalent data table a screen reader can navigate.