Describing an Image for Somebody Who Cannot See It

What actually happens

Somebody using a screen reader reaches an image on your page. The software reads the alt text aloud.

If there is none, it announces a graphic and either falls silent or reads the filename, which for most sites is a camera reference number read out digit by digit.

If the alt text is a string of service names and town names, it reads that aloud too, at length, which is genuinely unpleasant to listen to.

The person then continues, having learned either something useful or nothing.

Who this affects

More people than most businesses assume, and not only people who are blind.

Anybody with significant sight loss, which becomes more common with age and is therefore a substantial share of many trades' customers.

Anybody whose images have failed to load, on a poor connection or with images turned off to save data.

And search engines, which read alt text as one of the few descriptions available of what an image contains.

The first group is the reason to do it properly. The others are why it repays the effort more broadly.

The basic rule

Describe what is in the image and why it is on the page.

Those are two different things and the second decides the first. The same photograph needs different alt text depending on what it is illustrating.

A photograph of a kitchen on a page about kitchen fitting should describe the kitchen. The same photograph on a page about a particular worktop material should describe the worktop.

Ask what a sighted reader takes from the image at that point on the page, and write that.

Length and phrasing

• One sentence, usually. Two if the image is genuinely complex.
• No "image of" or "photograph of", which the screen reader already announces.
• Specific rather than general. Fitted oak kitchen, not kitchen.
• Plain language, since it is being listened to rather than read.
• End with a full stop, which gives the reader a natural pause.

The fifth is a small courtesy that makes a real difference to how a page sounds when read aloud continuously.

A worked example

A landscaping company with forty photographs and alt text on all of them, added by a previous supplier.

Every one read: landscaping Vancouver garden design Burnaby patio installation Coquitlam.

That is the same forty times, describes nothing, and for anybody listening to the page it is forty repetitions of a keyword list.

Rewritten, each described its image: a sandstone patio with a raised bed along one side; a cedar fence with a horizontal slat pattern; a garden before work began, with an overgrown lawn.

The page became usable with a screen reader, which it had not been.

Their image search traffic also increased, which was not the reason for doing it and is worth mentioning because the two goals point the same way.

Decorative images

The case where the right answer is nothing.

A background texture, a divider, a decorative shape, an icon beside a heading that repeats the heading. None of those carries information.

For those, the alt attribute should be present and empty. That tells the screen reader to skip the image entirely.

Omitting the attribute altogether is different and worse, because the software then falls back to reading the filename.

The distinction between empty and absent is the single most commonly misunderstood point in this subject, and it is the difference between silence and hearing IMG underscore four four seven one read aloud.

Images that contain text

A common problem with a simple answer.

Posters, price lists, opening hours in a graphic, or a logo with a tagline. The text in those is invisible to a screen reader and to search engines.

The alt text should contain the words in the image, because that is what the image conveys.

Better still, do not put important text in an image at all. Opening hours as real text can be read, searched, copied and translated; the same hours in a graphic cannot.

Where a graphic is unavoidable, the alt text is the fallback rather than the solution.

The counter-case

Where describing an image fully is wrong.

When the caption beneath already describes it. Repeating the same sentence means hearing it twice, which is worse than hearing it once.

When the image is a link, in which case the alt text should describe where the link goes rather than what the picture shows.

And in a gallery of many similar images, where forty near-identical descriptions become tedious. There, describe what distinguishes each one rather than repeating the common part.

The judgement throughout is what a listener needs, not what a checklist requires.

Complex images

Charts, diagrams and plans need more than a sentence.

The alt text says what the image is and what it shows overall. The detail goes in the surrounding text, where everybody benefits from it.

A chart with alt text saying it shows costs rising over five years, and a paragraph beneath giving the actual figures, serves everybody including the sighted reader who cannot be bothered to interpret a graph.

That is usually a better page anyway, which is a recurring theme in accessibility work.

Testing it without special software

Easier than most people expect, and worth doing once.

Every current phone and computer has a screen reader built in, and turning it on for five minutes tells you more than any amount of reading about the subject.

Navigate your own homepage with it and listen. The experience is disorienting at first and it is exactly what a proportion of your visitors have every time.

What you will notice: unlabelled images, links that announce only click here, and headings that are not headings.

Turn it off afterwards and fix the three worst things. That is a better use of an afternoon than an audit report nobody acts on.

Doing it on an existing site

1. Start with the pages people actually enter through.
2. Do the images that carry information before the decorative ones.
3. Set decorative images to empty alt, not absent.
4. Fix anything containing text as a priority.
5. Add it as a habit for everything new.

The fourth is the highest-value item on most sites, because an image of opening hours with no alt text is information the page appears to contain and does not.

The related question of filenames is covered in naming image files before you upload.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.