Writing ALT text for screen reader users: a practical guide

Close your eyes and have someone read a web page to you out loud, including every image description. Most sites become an odd experience within seconds: "image", "IMG underscore 4471", "banner banner banner", "click here". None of that tells you what is on the page. Writing ALT text for screen readers is about that listening experience, not about filling an empty attribute. This guide covers how to decide what to say, how much to say, and what to do with the awkward cases like charts, screenshots and images that are also links.

What a screen reader actually announces

Screen reading software such as NVDA, JAWS, VoiceOver and TalkBack reads a page in order. When it reaches an image, it says "graphic" or "image" and then reads the alt attribute aloud. The listener cannot skim it, cannot glance past it and cannot see the picture to fill in a gap.

Two things follow from that. The description has to make sense in the flow of the sentences around it, and it has to be worth the time it takes to hear. A listener consuming a page at speed will notice every word that added nothing.

Blind and low-vision users are not the only ones affected. People with certain cognitive disabilities use read-aloud tools, and a visitor on a slow connection sees alt text when an image fails to load. But screen reader users are the ones who depend on it completely, so write for them.

Describe the purpose, not the appearance

The most useful question is not "what does this picture look like?" but "why is this picture here, and what would a sighted visitor take from it?" Then write that.

A photo on a bakery's contact page might be visually described as "a brown wooden door with a glass panel and a small sign". What matters to the reader is "Shop entrance on the ground floor, beside the pharmacy". The second version helps someone find the place; the first only lists shapes.

The same picture can deserve different text in different places. A photo of a saree on a product page needs colour, fabric and detail because those inform a purchase. On a blog post about festival shopping, the same photo might only need "Woman choosing a saree at a market stall".

Words to leave out

• "Image of", "photo of", "graphic showing": the screen reader already announces that it is an image.
• File names, dimensions and camera details.
• Text that simply repeats the heading or caption next to the image.
• Marketing language nobody can verify from the picture, such as "our world-class facility".

How long should ALT text be?

Aim for one clear sentence. Around 125 characters is a common working limit, partly because some older assistive technology truncated longer values, and mostly because a long description read aloud in the middle of a paragraph is tiring.

If the image genuinely needs more, the extra belongs in the page content, where everyone can read it, or in a longer description linked from nearby. Do not try to compress a data table into an attribute.

Front-load the important part. A listener who hears the key point in the first few words can move on without waiting for the rest.

Handling the difficult cases

Images of text

Festival offer banners, price lists saved as JPEGs and quote cards all hide their words from a screen reader. The alt text must carry every word that matters, including the offer, the dates and the conditions. If the banner says "Flat 20% off all cotton kurtis till 5 October, use code COTTON20", that is your alt text, not "Diwali offer banner". Better still, put the text in HTML and use the image only as a background.

Charts and graphs

A screen reader user needs the finding, not the picture. Give a short alt text naming what the chart shows, such as "Bar chart of monthly enquiries from April to September", then put the actual figures in the page. A small HTML table or a short paragraph stating the trend and the key numbers serves everyone, including people who cannot interpret a dense graph.

Screenshots and diagrams

Describe what the reader is meant to notice. For a screenshot of a settings screen, "Settings page with the Enable two-factor authentication toggle switched on" is far more useful than "screenshot of settings". For a process diagram, describe the sequence in the surrounding text and keep the alt text to the diagram's subject.

Linked images

When an image is the whole content of a link, the alt text becomes the link text, so it must describe the destination rather than the picture. A logo linking to the home page should read "GMaxMart home", not "company logo". A product thumbnail linking to a product page should carry the product name. And if the same link appears next to a text link with the same target, the image can take empty alt text so the listener does not hear the destination twice.

Icons that carry meaning

A magnifier icon used as a search button needs an accessible name such as "Search". A phone icon beside a number that is already written out needs nothing. The test is whether the icon is the only source of that information.

A quick way to check your own pages

Pick your five most important pages and do this:

1. List every image on the page and write down what each one is for in a few words.
2. Read the existing alt text aloud in page order, without looking at the images.
3. Mark anything that is a file name, a duplicate of nearby text, or meaningless out of context.
4. Rewrite those, keeping each to a sentence, purpose first.
5. Replace images of text with real text wherever the platform allows it.
6. Turn on a screen reader and listen to the result once, which catches problems reading alone will not.

Do the home page, a product or service page and a contact page first; those carry the most decisions for a visitor.

Making this a habit rather than a project

The real win is writing descriptions at upload time, while you still know why the image was chosen. Add a line to your content checklist, and give whoever uploads images two examples of good and bad descriptions to work from.

If your site has years of images behind it, our team can audit the templates and the highest-traffic pages as part of an accessibility review; see our services for where that fits.

Frequently asked questions

Does every image need ALT text?

Every image needs an alt attribute, but purely decorative images should have an empty one so screen readers skip them. Missing attributes are the real problem, because some software then reads the file name instead.

Can I use the same description for an image used on several pages?

Often yes, if its purpose is the same each time. When the context changes what matters about the image, write a version that suits the page it is on.

How do I write ALT text for a photo of a person?

Name them and give their role if that is the point, for example "Dr Meera Nair, clinic founder". Describing appearance is rarely relevant unless the article is about appearance.

What about images inside PDFs and emails?

The same principle applies. PDFs need tagged alt text in the authoring tool, and email images need alt attributes, which also help when a mail client blocks images by default.