How to Write Alt Text That Helps Screen Reader Users

A screen reader user lands on your product page and hears "image, IMG_4471.jpg" three times in a row. They have no idea whether those images show the product, a size chart or a decorative swirl, and they leave. Learning to write alt text properly fixes that, and it takes less effort than most teams assume.

This guide covers how to write alt text that actually informs, when to leave it empty on purpose, and the patterns I see go wrong in code reviews most often.

What alt text is for and who hears it

The alt attribute gives an image a text equivalent. Screen readers read it aloud in place of the image. Browsers show it when the image fails to load. Search engines use it to understand what the image shows.

The key word is equivalent. Alt text is not a caption, not a keyword list and not a description of the file. It should give a person who cannot see the image the same information or function a sighted person gets from it, in that exact place on the page.

That means the same photo can need different alt text on different pages. A photo of a red trail shoe on a product page needs the colour and model. The same photo on a blog post about marathon training might only need "a runner's shoe on a gravel path", or nothing at all if the text around it already says it.

How to write alt text in four questions

Before typing anything, ask these in order:

1. Does the image carry information or function? If removing it would lose nothing, it is decorative. Use an empty alt attribute and stop.
2. Is it a link or button? Then describe the action or destination, not the picture. A magnifying glass icon in a search button gets "Search", not "magnifying glass".
3. Is the information already in nearby text? If a caption or paragraph says it, keep the alt short or empty to avoid saying it twice.
4. What would you say to someone on the phone? Describe what matters in that context, in one sentence, usually under 125 characters.

Some quick before and after examples:

Empty alt versus missing alt

These two are not the same, and confusing them is one of the most common bugs I find.

An empty alt attribute, written as alt with an empty pair of quotes, tells assistive technology the image is decorative. Screen readers skip it silently. That is exactly what you want for background flourishes, spacer images and icons that sit next to a text label saying the same thing.

A missing alt attribute is different. With no alt at all, many screen readers fall back to reading the file name. That is how users end up hearing "hero underscore final underscore v2 dot png". Every img element needs an alt attribute. The only question is whether it is empty or filled.

Automated tools catch missing alt attributes well, but they cannot judge whether the text is any good. That gap is part of why automated accessibility scanners miss most real problems.

Stop writing "image of" and stop stuffing keywords

Many style guides still say to start alt text with "image of" or "picture of" so users know it is an image. Do not. Screen readers already announce the element as an image or graphic before reading the alt. Adding "image of" makes users hear "image, image of a laptop on a desk", and on a page with 20 images that repetition wears thin fast.

The exception is when the medium matters. "Oil painting of a harbour at dusk" or "screenshot of the settings panel" tells the user something they need.

The other habit to drop is writing alt text for search engines. "Best cheap running shoes running shoes for men buy running shoes" helps nobody, and search engines are good at spotting it. Write for the person listening. A clear, specific description is also what ranks well in image search.

Complex images, charts and screenshots

Charts and graphs

Put the main takeaway in the alt, such as the trend or the key number, and give the full data in a table or paragraph next to the chart. Alt text longer than two sentences is hard to listen to and cannot be navigated.

Screenshots in tutorials

Describe what the reader needs from the screenshot. "The Network tab with the largest request highlighted at 2.4 MB" is useful. "A screenshot of DevTools" is not.

Images that contain text

If an image has text in it, such as a banner reading "20 percent off until Friday", the alt must include that text word for word. Better still, use real HTML text over a background image so it scales and passes colour contrast checks properly.

Checking your alt text in practice

Run through a page this way once per template, not once per image:

• Turn on a screen reader, such as VoiceOver on macOS or NVDA on Windows, and tab or swipe through the page. Listen for file names, repeated phrases and images that say nothing useful.
• Disable images in the browser and read the page. Does the alt text fill in what is missing?
• In your CMS, make the alt field visible and required, with a checkbox for "decorative" that outputs an empty attribute. That one change prevents most problems.

Pair this with a keyboard pass. Linked images with poor alt text often also have poor focus states, which you can test with the method in the keyboard navigation accessibility test.

Frequently asked questions

How long should alt text be?

Aim for one short sentence, usually under 125 characters. Some screen readers handle longer text fine, but long alt text is hard to listen to and cannot be skipped in parts. If an image needs more explanation, put it in the surrounding text or a caption.

Should decorative images have alt text?

Decorative images should have an alt attribute that is empty, not missing. The empty value tells screen readers to skip the image. A missing attribute often makes them read the file name instead, which is worse than nothing.

Does alt text help SEO?

Yes, search engines use alt text to understand images, and it helps images appear in image search. The best alt text for SEO is the same as the best alt text for people: a clear, specific description of what the image shows in context. Keyword stuffing does not help and can hurt.