The purpose of alt text
In short, alternative text (or alt text) is a description of an image or graphic for folks who use screen readers for blindness or for folks who may not be viewing the image itself for one reason or another (attention disabilities, slow internet connection, etc.).
Alt text also matters for SEO. The robots that compile information about websites for Google cannot see and interpret images, so they rely on alt text to tell them what is being depicted and why.
Best practices
- Describe the image in a way that includes pertinent details and expresses why the image is used.
- Write in natural sentences.
- Do not start alt text with An image of or A picture of. Screen readers will let folks know that an image alt text is coming, so writing this in the alt text itself is repetitive.
- Keep alt text under 125 characters.
- Don’t use alt text for elements that are entirely decorative.
To clarify some of these points, let’s use an example:
At face value, we might say:
A woman in an orange shirt smiles and holds her phone out in front of her.
That certainly describes the picture, but let’s look at how the use of the picture and its context might change how you’d write alt text.
Let’s pretend the picture is being used in a blog post about staying in touch with family when you live overseas. Then it might say:
A woman smiles and gestures while she talks to family over video chat using her phone.
Or it could be used to market a video chat app:
A woman happily chats using [app name], enjoying connecting with her loved ones.
It might be used in a really niche way, like an article about Asian women’s use of technology:
An Asian woman holds a phone out in front of her, smiling and gesturing.
You can see how the alt text changes based on context. Facts like the color of her shirt or her race become unimportant when other aspects are more central to the purpose of the picture.
There are a lot of details in a given image—after all, a picture is worth a thousand words!—and you can’t ever hope to include them all. And the people who most often use alt text don’t want you to! It gets annoying to listen to an unnecessarily long description, and many screen readers will stop reading alt text after 125 characters. It also serves as a light interruption to the content of the page, so you don’t want it to go on for too long.
Decorative images
Purely decorative elements and images don’t require alt text. This is because nothing of substance is lost if someone uses your website and never knows they are there.
On the Valerian website, we use some purely decorative elements, such as the plants in our footer:
🤔 This distinction can be kind of tricky, but one of the questions you can ask to determine if something needs alt text is Would a blind user miss out on something crucial if they didn’t know this was here? If the answer is no, then you can probably leave the alt text blank.
Setting alt text using AI
When you click on an image in the Media Library, you’ll see this screen:
The alt text is indicated by the red arrow. Some sites may be set up to generate this text using the AI automatically, but if the box is blank, you can hit the Update Alt Text button to generate something.
In this case, the AI-generated descriptions read:
A young woman in a red blouse, happily video calling on her smartphone in a bright indoor setting.
You’ll notice that it’s similar to our first alt text example, when we weren’t considering context (although the AI and I apparently disagree on whether her shirt is orange or red 😂). This automatically generated alt text is completely serviceable, but it isn’t optimized.
To optimize the automatically generated alt text, you would simply click on this box and make your changes. You can also use the Update Alt Text to get the AI to try again, though the results will likely be very similar and won’t be able to take into account the context in which you’re using it. In many cases, it’s better to use the AI-generated alt text as a jumping-off point and edit it to include other best practices.
All edits are saved automatically, so you can use the arrow buttons in the upper right to navigate through the Media Library if you’re looking for another image, or you can close the window.