Alt text: what a screen reader actually says

You upload the ribbon-cutting photo to the news page. The editor shows a box labeled "Alt text." You type "photo," or you leave it blank because nothing happens if you do, and you publish. The page looks right on every screen in the building.

For the resident running a screen reader, that box is the entire image. Not a fallback, not a nice-to-have — it is the only version of that picture they will ever get. So it's worth knowing, precisely, what each of the four things you can put in that box sounds like out loud.

The four states an image can be in

No alt attribute at all. <img src="DSC_0413.JPG">. Behavior varies by screen reader and browser, and none of the options are good. VoiceOver on macOS falls back to the file name and reads it aloud, extension and all. NVDA and JAWS may announce "unlabeled graphic," or ignore the image entirely and give the user no hint it was ever there. The one thing that never happens is the resident learning what the photo shows.

An empty alt attribute. alt="". This is announced as nothing at all. The screen reader steps over the image without a sound. That is the correct answer for decoration — the divider flourish, the background texture, the icon that sits next to a word that already says the same thing. Empty alt is a decision, not a shortcut.

A lazy alt. alt="image", alt="photo", alt="DSC_0413". NVDA announces "Graphic, image." JAWS announces "image, graphic." VoiceOver says "image, image." That is the entire payload. It is worse than empty, because now the reader has stopped and spent the user's time on nothing. Same reason you never begin with "Image of" or "Photo of" — the screen reader has already said "graphic."

A real alt. alt="Council members cutting the ribbon at the new Second Street fire station". NVDA: "Graphic, council members cutting the ribbon at the new Second Street fire station." That's it. That's the whole feature.

The criterion is 1.1.1 Non-text Content, Level A — the lowest bar in WCAG 2.1, and the single most-failed one on municipal sites.

The images that cost you the most are the linked ones

Here is where a city site quietly falls apart. Your agenda list is probably built like this:

<a href="/agendas/2027-01-12.pdf"><img src="pdf-icon.png"></a>

With no alt, that link has no accessible name. Screen readers let users pull up a list of every link on a page and jump around by it — a very common way to navigate. Your agenda page renders in that list as forty identical entries reading out raw URLs. That's a failure of 2.4.4 Link Purpose (In Context), Level A, and of 4.1.2 Name, Role, Value, Level A.

On a linked image, the alt attribute is not a description of the picture. It is the name of the link. alt="January 12 city council agenda (PDF)". If the same icon appears next to a text link that already says that, give the icon alt="" and let the text do the work — one name, not two.

One more: a scanned flyer posted as a JPEG is an image of text, and no alt attribute rescues it, because 1.4.5 Images of Text, Level AA, says use real text when you can. Retype the burn ban notice into the page.

Here's the part the alt-text guides skip

The correct alt text depends on why the image is on the page, not on what is in it.

Take one photo of the mayor at a podium. On the news story about the budget vote, the alt is about the vote. On the mayor's staff page, it's "Mayor of Example City" — or alt="", because the name is printed underneath. In a photo gallery where the picture is the content, it's a description. Same file, three pages, three different correct answers, and two of them contain no information about podiums.

That is exactly why the "generate alt text with AI" button and every automated remediation tool fail this criterion, even when their output reads well. 1.1.1 does not ask for a description of the image. It asks for an alternative that "serves the equivalent purpose." A caption of "a group of people standing outside a brick building" can be an accurate description and a failing alternative at the same time — and an automated scanner will score it as a pass, because an alt attribute is present.

Only the person who chose to put the image there knows what it was for.

What to do

Turn on a screen reader and listen to one page. NVDA on Windows is free; VoiceOver is already on every Mac and iPhone.
Go through your images and sort each one: does it carry information, or is it decoration? Decoration gets alt="".
Fix every linked image and icon button first — those break navigation, not just comprehension.
Write the alt for the purpose the image serves on that page, and keep it to a sentence.
Replace scanned notices and flyers with real text on the page.

Not sure how many of your images are announced as file names right now — send me the URL and I'll tell you.