Alt Text

A picture alone carries nothing to someone who can't see it. To a user of a screen reader — software that reads what's on screen out loud — an image with no text attached is a blank. And when there is genuinely nothing to read, the program falls back to the file name, which is how "image" or "I-M-G underscore 2 8 4 1 dot p-n-g" ends up spoken in the middle of a sentence.

Pagedeck ran into this directly. Noa built the pricing-change announcement as a single handsome graphic, with the effective date and the new prices drawn into it as artwork. Anyone looking at the screen read it fine. Anyone listening got an announcement with no content in it at all, and nobody noticed until Sofia passed along the support tickets.

Alt text is the slot built to fill that blank. Write the picture out once in words and the same information travels two ways: as a picture for people reading the screen, as a sentence for people hearing it.

The tag that places an image has a separate field for its description, and whatever goes in that field becomes the alt text. It never appears on screen under normal conditions. It's handed to assistive technology, and it's displayed in place of the image when the image fails to load — the words next to a grey box on a slow connection are this field.

What you write in it is the whole job. Four rules cover most cases.

1. Describe the information, not the picture. What matters is what a reader needs from this spot, not a literal account of what's visible. The same revenue chart is "Q3 revenue of $320,000, up 12 percent from Q2" in a results post and "a vertical bar chart with five blue bars" in a design portfolio.
2. Give decorative images an empty value. Dividers, background textures, and anything else carrying no information get an empty description, which tells the screen reader to skip past. That's different from removing the field, because a missing field sends the program back to reading the file name.
3. Leave out "image of" and "photo:". The software already announces that it's an image, so adding it produces "image, Q3 revenue chart image" in the listener's ear.
4. Stop after a sentence or two. If a picture needs more than that, put the essentials here and write the rest out as body text on the page. A screen reader plays the description as one uninterrupted run of speech, so a paragraph in this field is harder to follow than the same paragraph sitting in the page where the listener can move around inside it.

The same sentence does three different jobs in three places.

The first is accessibility, which is what the field was made for. WCAG, the international guideline that sets out what has to be met and to what level, lists it as a requirement, and public-sector accessibility rules in most markets trace back to those same items.

The second is broken images. When the network drops, the address is wrong, or a corporate firewall blocks outside images, this sentence is all that's left on the screen. In email, where images are blocked by default in many clients, the alt text effectively becomes the message. That's worth remembering before building a campaign email as one large graphic, because a large share of recipients will only ever see the words behind it.

The third is search. Search engines can't read pictures either, so they judge an image by the words attached to it. Marketing teams treat that as an asset under the name image alt. Same field, same syntax, different purpose.

In terms of who writes it, the first draft usually comes from whoever made the picture. At Pagedeck, Noa writes a description alongside each image when handing off a design, and Theo copies it into the markup as he builds the screen. Automated checkers catch an empty field reliably, but no tool can judge whether the sentence inside it is any good, so a person still reads them. Like semantic markup and ARIA in the same group of techniques, the work is really about deciding what reaches a screen reader and under what name.

"This banner has no alt text. Please put the wording from inside the graphic in there."

Information drawn into a picture as artwork isn't reaching anyone who listens to the page.

"It's decorative, so I left the alt text empty on purpose."

Don't flag it as a gap and don't fill it in.

"Don't stuff keywords into alt text. Somebody is listening to that."

Words added for search ranking get read aloud exactly as written.

After those support tickets, Pagedeck added one step. Noa writes a line of description for every image when posting a design, and the design check confirms that the line actually made it into the build. Mia does the same when writing announcements — any words drawn inside a graphic get repeated in the body text.

One more rule came out of it. Anything costly to get wrong, like an effective date or a price, doesn't go into a picture in the first place. Alt text can patch it, but a fact living in two places is a fact that eventually gets updated in only one of them, and the version people hear is the one nobody remembers to check.

The common assumption is that every image needs a description. Automated checkers encourage it by flagging decorative graphics the same way they flag meaningful ones. But describing an image that carries no information only adds noise for the listener. Ten dividers announced as "divider" ten times make a page harder to follow than silence would. The test for which images to fill in is simple: would anything be lost if the picture vanished? If the answer is no, the empty value is the correct answer rather than a missing one, and it's worth saying so in the handoff notes so the next person doesn't helpfully fill it in.

The other frequent misread is treating the field as a search-ranking box. That third use really does exist, which makes the mistake easy, and it produces entries like "collaborative doc tool team documents free workspace". Because the field is also spoken aloud, a listener reaches the picture and hears an advertisement. Search engines have spent years learning to discount lists like that, so the usual result is losing both audiences at once.