How to write helpful alt text descriptions for your images

…and when to leave them empty. Examples included.

Illustration by Cynthia Marinakos.

I once looked after online communications for an organization that helped people who were blind or had low vision. I also worked with colleagues — mates that were blind or had low vision: Prue. Kenny. Brandon.

These were people I spoke to every week. Shared lunch and laughs with. People I respected and admired.

Images and graphics add to the experience of reading online. They break up the monotony of text and can help us better understand concepts. They can also make pages look great, can’t they?

But not every reader can physically see images.

And when you know the readers by name, as I did, it made me realize I would intentionally exclude Prue, Kenny, and Brandon if I didn’t share images in a way they could understand.

That would be a shitty thing to do to my mates.

And that made me realize that taking a little extra time to make online images accessible matters to a whole lot more people than just my mates.

Introducing ‘alt text’

‘Alt text’, short for alternative text, gives users who can’t see images an alternative way to gain information from images. It’s helpful for people as it allows text to be read aloud using assistive technology: screen readers, speech input software, and speech-enabled websites.

Alt text is also helpful for sighted users. For instance, have you ever opened an email on your phone but didn’t want to download the images? Perhaps you’re flicking in a hurry. Or you’re running low on data.

Another great reason to use alt text is for search engine optimization (SEO). Text is the foundation of great SEO. Alt text allows search engines to scan and useful results can improve a website’s rankings, according to the Google images best practice page.

How alt text helps people understand images on websites

Here’s a video showing how a reader uses a screen reader to browse websites. Skip to 1:57 minutes to see how he ‘reads’ images.