Have you seen those postcards that are just black on the front with text that reads something witty, like: ‘London at night’? The creators include the text description so that the joke makes sense; otherwise, it’s just a black postcard.

The black postcard is the equivalent of what a person using screen reader software experiences when you use a picture, graph, or diagram without providing accompanying a description. Just as with the postcard, without the text, the image is meaningless.

The description of the image is called alternative text (alt text), as it provides a non-visual alternative to an image.

You can convey so much information with an image: you can add gravitas or light relief to a story, explain a complex process, or illustrate trends in data at a glance. However, you can also deny this important information to those unable to see the image and miss the opportunity to reach a wider audience.

Here’s some guidance from Alan Sleat, one of our Accessibility Assessors who uses a screen reader, on how to improve your website, posts, documents and presentations with alt text.

What Should I Write?

I tell colleagues and clients that the short answer is, to quote Catchphrase, ‘say what you see’. It really is just that. Imagine you’ve just come back from holiday and hand your phone to a friend to look through hundreds of photos while you nip out of the room to make a cuppa. Your friend flicks through your photo album and sees a brick building, some trees, and a landscape—all very nice but meaningless without context. However, if you sit with them and relay the story alongside each photo, then the images make sense.

Why Alt Text Is Helpful for Someone Who Cannot See

I first became aware of alt text after I lost my sight. I was on a council website in the weather section where there was an image of a lamb jumping in the snow. As I had seen this before, I had that mental image in mind, so the alt text description brought the page to life for me.

On a more practical note, graphics are often used to enhance and promote discounts or money-saving tips—and I’d really like to know about those too!

I was once on a website where the homepage featured a large image stating: ‘Spend £60 and get £20 off your shop.’ However, I wasn’t aware of this image because there was no alt text highlighting the offer. Fortunately, my wife was passing by and alerted me to it. With the addition of a chocolate bar, my £59.50 shopping basket tipped over £60—and saved me £20… plus I got some chocolate! I may make light of this situation, but it’s a serious issue. Images like this without alt text discriminate against people like me—people who interact with websites non-visually.

How to Achieve Alt Text on a Website

For those creating web pages, here’s the technical bit: there needs to be a tag within the code that explains the alt text. When an image is added to the page, its code must be altered to include an alt tag. For example:

<alt=”London at night. Tower bridge brightly lit in the foreground.”

For those sharing images in Word documents, emails, or on social media, you can add alt text by highlighting the image and using this shortcut (as I only use a keyboard): press Shift and F10 simultaneously, then press ‘A’. This will open an edit field where you can add your alt text.

Just note only screen reader users will be able to hear the description—you won’t see any added text on the page yourself. If you need to check the description later, repeat the shortcut to review it.

Summary

Simple steps that will benefit not just screen reader users but also your site:

  • Add alt text to your photos, images, and any other visual representations—remember just ‘say what you see’.
  • Bring your website to life for everyone.
  • Remember that just because someone cannot see an image doesn’t mean they don’t want to know about it or understand what you’re sharing with sighted audiences.

If an alt text description is included, people can choose whether or not they want to read it.

How accessible is your website? Find out with our free snapshot! Or contact Accessibility-Services@Shaw-Trust.org.uk.