Alt text makes images accessible to everyone

Earnsy Liu | August 11, 2021

Do you like my new puppy? The one in this photo.

What, you can’t see anything? Why not? The rest of us can!

Know what alt text is

Alt text, short for alternative text, describes an image using text. If you have an image but don’t describe it, some readers won’t know what you’re showing them. Like in the example above.

But don’t confuse alt text with captions.

Captions support or elaborate on an image, and they often draw links between the image and the text. Alt text sticks to describing exactly what’s shown in the image. For example, for the image below, your caption and alt text could be quite different.

Caption: Training your puppy is fun but not always easy!
Alt text: Golden retriever puppy sitting in its empty feeding bowl.

Captions are visible to everyone, but alt text hides behind the scenes and only reveals itself to those who need it.

Know why alt text is important

Alt text benefits your users and you in several ways. It means your information reaches more people.

Screen readers use alt text to describe images. A screen reader is specialised software that reads text to people who are blind or have low vision. Some people with reading difficulties use them too.

Watch a 1-minute video about alt text on Twitter

Images are described even if they don’t display

If an image has no alt text, screen readers say things like ‘image’ or ‘image may contain’. Or they may read the file name. That would be of limited use at best, or confusing at worst. ‘Outlook-tramb5bg.png’ doesn’t help anyone.

Internet browsers also use alt text to describe an image if the image does not load properly. This benefits sighted people too. Someone may have trouble connecting to the internet, or they may have turned off images to save data.

Here’s what I saw when I had a dodgy internet connection and the image didn’t load. I had no idea that there was a free webinar coming up, let alone when it was.

Search engines will rank your webpage higher

Alt text helps search engines understand your webpage better. That means your page appears earlier in search results.

You will reach more readers

Many people who are blind or have low vision use screen readers. That’s a lot of people who might miss out on information if it’s not presented well.

Alt text is about inclusion. Consideration. Empathy.

Make information available to everyone, not just sighted users.

How to write good alt text

Keep it short and sweet — try to limit it to 125 characters, because that’s when some screen readers stop reading.

Describe the image only — don’t add information that someone looking at the image cannot see, and don’t interpret the image. Feel free to say a person is smiling, just don’t say they’re smiling cynically or nervously.

Be human — imagine you’re describing the image to someone over the phone. How would you concisely tell them exactly what’s in the image?

Use punctuation — that avoids ambiguity and tells screen readers where to pause.

…and things to avoid

Don’t copy the caption or something that’s already in the text — that would be repetitive.

Don’t start with ‘image of’, ‘photo of’, or any such variation — that would be repetitive too, because the software will already tell the user that it’s an image.

Don’t use file names as alt text — they’re not descriptive enough and may contain information that readers don’t need, such as the date.

Don’t let software generate alt text for you — the alt text may not be accurate.

Describe all meaningful images, even complex ones

Describe all images, not just photos. If you have a banner image in your email signature, write alt text for it.

Describe figures, diagrams, and graphs too. If the image is too complex to describe in 125 characters, don’t keep writing! Write alt text for the main message in the image. Then provide a more detailed description separately, either in another section of your document or webpage, or in a file that you link to.

Below is a link to a great example. You can explore the full visualisation by opening a PDF, or you can read the text version underneath.

Example of visualisation from the business.govt.nz website

The only time you don’t need to write alt text is when images are purely decorative. Some programs, like Word and PowerPoint, let you tick a box that says ‘Mark as decorative’, so screen readers know to skip the image.

Write alt text that works for your audience

Alt text is not ‘set and forget’. Alt text that’s right one time may or may not be right the next time. What you describe, and how much, needs to be right for the context and audience.

Think of your puppy photo. If you were describing it to someone who didn’t care much for dogs, you might just say, ‘My new puppy sitting in its bowl’. But if you were describing the photo to a dog-lover, you might mention that the puppy was a golden retriever. If you were describing it for a photography club, you might talk about lighting or composition. If you were talking to vets, you might highlight something unusual about its features.

Add alt text in different programs

If you’re working in Word or PowerPoint, right-click the image and select ‘Edit alt text’. How you add alt text on social media depends what platform you’re on. You would usually upload your image, then select ‘Add description’ or ‘Write alt text’.

Write alt text on LinkedIn

Write alt text on Facebook

Write alt text on Instagram

Write alt text on Twitter

Do it!

If you’re reading this with your eyes now, be glad you can. Write alt text today, and make it the norm. If you or your loved ones ever need to use a screen reader, you’ll be glad you played your part in normalising it.

Go on, write alt text the next time you post an image online. Tag us (and add #ClearCommunication) so we can give you a thumbs-up!

Read more about alt text

How accessible is social media if you have a visual impairment? — A blind person’s experience with alt text on the Life of a Blind Girl blog

Read our blog about New Zealand government standards for accessibility