“A person face-palming”: A quick guide to writing good alt text

Depending on the size of the media library you’re working with, writing good alt text could be one of the quickest wins for improving the accessibility of your website. But I’ve come across so many websites with pretty bad alt text — or worse, no alt text at all — because, for the most part, no one is told what good alt text is.

What is alt text, and why should I use it?

“Alternative text” or “alt text” is a little bit of text used to describe images and other visual content on a website. It’s used by screen readers and other accessibility tools so that users who aren’t able to see content are still able to understand it.

Using good alt text also has other benefits, including for SEO: crawlers will read the alt text of an image, and — if your alt text is relevant, and includes your focus keywords — it could give your content a little boost.

It’s important to note, though, that any SEO benefits of alt text should not outweigh the accessibility aspect: you should only include your keywords in the alt text if it makes sense to do so. Don’t keyword stuff your alt text just to boost your SEO, to the detriment of the accessibility of the page.

Just enough is more than enough

The purpose of an alt text is to be descriptive: you should be able to understand what the image shows, solely by reading the alt text.

This doesn’t mean that your alt text needs to be a billion words long, describing every detail of the image. It should be as concise as possible — you don’t want your users to have to listen to paragraphs of alt text before they reach your actual content.

The alt text should include just enough information to convey what the image contains, and you should not to include any extraneous details.

Gender and ethnicity in alt text

Although it should be judged on a case-by-case basis, you should try to avoid mentioning the gender or ethnicity of the subjects in an image, unless it’s important to understanding the context.

For example, in an image of “a man sitting on a beach, watching the sunset”, the gender of the person isn’t really required to understand the image, so it might be better to just write “a person sitting on a beach…”

Likewise, in an image of “a hispanic person looking at a smartphone” it might be more appropriate to simply write “a person…”

If the gender or ethnicity of the subjects don’t impact the meaning of the image, it might be more appropriate to use more gender or ethnicity neutral words. There are, however, many instances where mentioning race, ethnicity, gender, or even names of specific people could be important to understanding what the image is supposed to convey:

“a woman crossing a dark road with a worried expression as a man follows her”, shows a gendered harassment, so the gender of both subjects are included.

“a person of color, raising their fist” carries a more specific meaning than would be conveyed if the ethnicity of the person was excluded. The gender here, though, might not matter so could be excluded.

“Tim Cook, holding an iPhone 11” is talking about specific person, and a specific device and both are needed to understand the context of the image.

Conveying what the image means, in the context of your surrounding content, should always be the first priority when writing alt text. So you should consider whether mentioning the gender or ethnicity of subjects adds to the understanding of the image, or whether using neutral words and phrases might be more appropriate.

Don’t say it’s an image

Something that I often see on websites is alt text that goes something like “an image of three children” or “a photo of some ducklings”.

Screen readers will, in general, announce the type of content that it’s currently focused on. For example, if an image has focus, the screen reader will announce “image”, so including “an image of…” in your alt text just leads to unnecessary repetition.

One exception might be for illustrations — “an illustration of a duck”, for example — but only if the image being illustrated is important to understanding the context of the image.

Punctuate your sentences

Screen readers aren’t always the smartest tools.

Many screen readers, when reading alt text will just read the alt text, and then move on to the next bit of information without a pause. This makes it harder for users to delineate where the alt text ends, and the rest of the content begins.

Because of that, you should make sure that you use punctuation within your alt text, and always your alt text with a full-stop (or a period, for y’all Americans). This will provide brief pauses in the reading, and help the user to better understand the text.

A picture says a thousand words

When writing alt text, you should think about what the purpose of the image is: what is it you’re trying to say? That will help you identify the most important things in the image, and what you should focus on in your alt text.

How about some examples?

Photo by Charis Gegelman on Unsplash

A person taking a photograph using a smartphone.

Here, the person and what they are doing is the important thing about this photo, so we mention it first. The type of device that they are using — a smartphone — is some secondary information that could potentially be excluded, depending on the context in which the image is used.

In the picture, the background is blurred, and doesn’t really provide any information, so I’ve excluded it from the description. However, if including the description of the “misty, mountain background” was important to the surrounding content, then it could be included.

Photo by Tyler Lastovich on Unsplash

A rocky river bed flowing from a lake, in front of a snow-capped mountain range.

Here, the landscape itself is the subject, so I’ve described the main aspects of landscape as fully but concisely as possible. Depending on the how the image is used on the page, it might be worthwhile to name the actual location photographed. For example, if the image was used on a travel blog, you might want to say that it’s an image of the “Hooker Valley Track in New Zealand’s Mount Cook National Park” as part of the description. If doing this, you should still provide a visual description of the image — the location should not be the entire alt text.

Photo by Camylla Battani on Unsplash

A dog wearing a beanie hat, and looking unhappy about it.

Here, the dog itself is the primary focus of the image. Editorialising slightly — mention that the dog doesn’t look particularly happy — and the less formal tone when talking about it’s expression helps get across some of the comedic intent of the image, which provides a bit more context to allow users to better understand the picture.

Not everything needs alt text

There are some occasions where including alt text might actually degrade the experience for screen reader users: alt text could lead to accidental duplication of content if the most appropriate alt text for an image is featured in surrounding copy. For example, it might be appropriate to exclude alt text from a user’s avatar, if their name is used as a header immediately before or after the image.

Likewise, purely decorative images such as arrows within buttons, where the button also has a text label, do not need alt text.

If you’re not using alt text, however, your image tag should still have an alt attribute, but it should be left empty. Otherwise, many screen readers will simply read out the image URL, which is obviously not what you want to happen.

Think about it from the start

There’s no down side to adding good alt text to your images, and using it wisely can even help your SEO. But the most important thing is improving the experience and accessibility of your site for people who need the alt text.

If you have a large content or media library, going back and adding appropriate alt text can be a mammoth task. Which is why it’s so important to think about appropriate alt text — and accessibility in general — from the start, when you’re creating your content.

Just remember to consider what you want to convey, be concise, and be accurate, and you can’t go wrong.