Alt Text
The What
Any time you use an image to convey information, it’s important to remember that not all readers will be able to see that image (or see it clearly). Alt text is language that describes images used in digital media, so readers with visual disabilities can interpret their content. While you can’t typically see alt text on the page, a screen reader knows it’s there and will announce the image and its description to its user.
The How
Level 1: Making a Start
Any time you use an image, ask yourself: is this image communicating something important?
Sometimes, the answer is “no.” You might add a cute little cactus to your slide deck because it makes the slide feel less bare, while your presentation (and that slide, in particular) has nothing to do with cacti. In that case, you don’t need alt text. Instead, leave the alt text area blank, and if you have the option, mark the image as decorative.
But maybe the answer is “yes.” Then, you do need to write alt text, to ensure all readers can get the content your image conveys.
✔️The best alt text is:
- concise (125 characters max)
- descriptive
- functional
- contextual
- reader-oriented
❌Avoid:
- “Image of” (screen readers will announce images as such)
- description for the sake of description
- extraneous information
Take a look at your image. What’s most important to your reader? “A golden, sandy beach with palm trees swaying in the breeze and the sun just barely starting to rise over distant cliffs” may be descriptive, but it’s unhelpful if the point of your image is that a specific type of rare crab has been spotted off the coast of x island for the first time in y years. Similarly, if you’re creating an ad for a study away program, the tiny crab in the foreground might not need to be mentioned at all.
Alt text should only include the most important information. And what’s important depends on the image’s function, where it’s located, and who your target reader might be. Use the expanders below to practice making alt text. First, look at an example image. Choose a context and a purpose, and make alt text for the image. Then, check out the examples we’ve created, to inform your future alt text writing. Is there anything you particularly like (or don’t like) about the example alt text?
-
-
Some options could be:
- Crescent moon brightly illuminated against blue-and-orange twilight, over inky mountain range.
- Waxing crescent moon. Only a thin sliver of moon’s right side visible.
- Contrast and composition. Black mountains in lower half of image contrast with muted orange and grey-blue sunset above. Centered, brightly glowing crescent moon creates visual focal point.
-
-
Some options could be:
- Dark leafless tree against snowy ground and white sky.
- Leafless maple against white sky, revealing opposite branching pattern. Both main branches and smaller twigs branch oppositely.
- Leafless maple tree, showing the fractal geometries of its branches, the inspiration for Santiago Calatrava’s Allen Lambert Galleria in Toronto.
One last thing related to images and content: avoid using images of text. If you’re sharing a post to advertise an event, and the image you put with that post has the time and date of the event, duplicate the time and date in the text of your post and mark the image as decorative (or use the alt text to describe other relevant aspects of the image). But if possible, avoid putting text in the image to begin with.
Level 2: Refining Your Approach
Part of refining your alt text relies on refining the lens through which you view an image.
Is there content in the image that’s repeated in the body text somewhere on the page? If so, you might only need the content that’s not duplicated elsewhere in writing. For instance, if you have an image of a place setting, and some of the instructions for setting the table are in the body text, you can just add the visual content that isn’t stated elsewhere. On the other hand, if you write about an experience someone had and include an image of some aspect of that experience, you will want to connect the image to the story in your alt text (while duplicating as little of the story as possible).
Is there a part of the image that’s purely functional and should inform your alt text rather than be named in it? A good example is a penny used to show scale. You wouldn’t write “four small objects and a penny,” because (while technically accurate) it doesn’t actually communicate the image’s message, which is that there are four objects, each x number of pennies in length.
Another component of refining your alt text involves [something I was going to write and forgot]