Images can be a great way to capture people's attention and evoke emotions. In some cases, they can improve comprehension. However, it's important to keep accessibility in mind when using images.
Imagine you open an email and all it has on it is this:
What?! When’s the birthday party? Where? Whose birthday is it?
This is what it’s like for screen reader users every time they encounter an image without alternative text. In this case, all they’d hear is “graphic bday party invite png.”
The most important things to remember about images:
- People who are blind can not see them and screen reader software won’t read text in an image.
- People with low vision may not be able to see them.
- People with internet connectivity issues may not be able to see them.
- People who disable images to reduce data use will not see them.
- Sometimes, people can see images, but not understand them.
What is alternative text?
Alternative text (or "alt text") describes the content of an image. It will display when an image doesn’t load, and will also be read by screen reader software.
If the image loads, then the alt text will not be visible to sighted users.
Here’s our birthday invitation with alternative text:
When should I use alt text?
- If an image provides context or information, then make sure you add alt text.
- If an image is purely decorative, use a null alt text tag (alt= ""), if possible. (Some content management systems don’t provide this option.) A null alt text tag will tell a screen reader to skip the image.
- If alternative text (or a null alt text tag) is not included, most screen readers just read the image’s file name. Usually, this isn’t helpful and creates a poor user experience, especially if the file name is long or nonsensical.
- If you aren’t sure if an image is decorative, or if you can’t add a null alt text tag, it’s better to provide a brief, simple description.
Is alt text the same as an image description?
Not exactly. Alt text should be brief. Image descriptions are longer and more detailed. People often use image descriptions in cases where an image is the primary focus. For example, they’re common on Instagram because the site is focused on sharing photos. Here’s an example of an image description written by Portland Audubon Society:
A Hummingbird's nest containing two nestlings with eyes wide open and beaks slightly open. The nest is attached to an outdoor lighting wire that was cut. Someone is holding up the wire with the nest between their pointer finger and thumb.
Alt text for the same image might read, “Tiny moss-covered hummingbird nest with two hungry baby hummingbirds.”
How do I write alt text?
To help you write useful alt text, think about how you might describe the graph over the phone to a friend. Use alt text for images on web pages, on social media, in email, and in documents. Some tips:
- Don't start with "image of." Screen reader users will be told by the software that it's an image. In most cases, don't use the term "photograph of." Images are assumed to be photographs unless otehrwise noted. One exception: You may include the phrase "photo of" if a web page included images of a variety art mediums. It's also OK to describe something as an illustration, map, or cartoon.
- Be brief. Many screen readers cut off text at 125 characters.
- State the action, if applicable. For example, if clicking on an image of a printer causes a page to print, the alt text should say, "print this page."
- Use a null alt text tag (alt= "") and/or an artifact tag (in PDFs) for images that are purely decorative.
- Avoid redundancy. If a caption under a photo says “George Washington,” don’t also include alt text that says “George Washington.” Image captions (if used) and alt text should be different.
- Use the description field when you add alt text in Google Docs. A title added in Google will not transfer if the document is converted to a Word doc and/or a PDF.
- Avoid the use of AI to create alt text. Human judgement is crucial. Alt text should not just be about what's in the image, but how it relates to the topic. Why is the image relevant to the story?
The art of alt text
Consider the context when you write alt text. Here are three ways to write alt text for the same image used for different content:
- A large, almost empty stadium. (A story about sports being canceled during COVID)
- Large stadium with cracked pillars. (A story about an earthquake retrofitting project)
- A man sprints up the stairs of a stadium on a sunny day. (A story about exercising outdoors)
What about graphs and charts?
Charts and graphs should have both captions and alt text.
The alt text should convey an overview of the information contained in the graph.
Image captions for graphs can be longer and might describe important data trends. This is helpful both for blind users, as well as the many users who struggle to understand infographics.
Options for headshots
Traditional headshots
The term, "headshot" in a professional setting implies a simple head and shoulders photograph of a smiling person in professional attire. For this reason, you may choose to include the term in your alt text (because it conveys meaning), but you don't have to. Here are a few options, all of which would be correct:
- If there is no image caption, use alt text: "Jane Smith," "Headshot of Gerardo Diaz," or similar.
- If the person's name, Leilani Kekoa, is in the image caption, use a null alt text tag if possible. The reason is that otherwise, a screen reader will read the name twice. If it's not possible to use a null alt text tag, use "portrait of Leilani Kekoa" or "headshot of Leilani Kekoa."
- If a nearby heading or text contains the person's name, but there is no image caption, include alt text. The reason is that the text is not programmatically attached to the image.
Photos with a little something extra
Alt text
If a person's photo includes unique positioning, facial expression, attire, and/or a backdrop that conveys additional meaning or tells a story, then this information should be included in the alt text. Examples of possible alt text:
- Ballet instructor, Vonda Jackson, wearing a pink leotard and toe shoes with arms outstretched in front of a ballet studio mirror.
- Agriculture professor, Ajay Bakshi, wearing a bee suit and standing next to a blooming fruit tree, with numerous bees flying around.
- James Babinski, holding a large camera to his face, is concentrating on photographing a plant at the botanical garden.
Image captions
For photos like these, you may choose to:
- Not include an image caption.
- Include an image caption with just the person's name.
- Include an image caption with different information. For example, "James Babinki was recently nomated for the 2023 Golden California Photography Award."
Images with text
When possible, avoid using images of text.
Sometimes, creative, well-intentioned people want to dress up text. So we put it into design software, make it pretty, and export it as a jpeg image. Then, we paste it into a newsletter or web page.
The problem with this is that text in an image file is not machine-readable as text. To provide equal access, make sure the information in the image is also in the body text of your web page, email or social media post.
Here’s our email with the birthday party invitation. We still have the festive picture, but we’ve also included the crucial text in the body of the text. If, for some reason, the image doesn't load, or the screen reader cuts off the alternative text, the vital information will still be available.
Greetings, party people! Please join us for Winnie’s birthday party at 2 pm on May 25th at Sir Barksalot Park!
What about logos?
This is the one exception-- logo images that contain organization names are okay. Just use the name in your alt text (not "logo of")-- it is understood that an organization name in alt text for an image near the top of content is a logo.
Other reasons to keep text and images separate
- People with vision challenges often use settings that automatically increase the text size. But text in an image doesn’t reflow, so they may have to scroll both horizontally and vertically.
- You can't copy and paste text from an image.
- The text won't get translated for people who use web page translation.
- Text on top of an image is often harder to read and may not have a sufficient color contrast ratio. If it's a low resolution image, the text may also be blurry (or pixelated) and difficult to read.