One of the most impactful things that publishers can do to make their content more accessible to people with disabilities is to add alternative text, or alt-text, to images on their websites and other digital content they produce. Alt-text, which usually consists of anything from a few words to a couple of sentences that describe an image, is a written substitute for visually seeing those images. A person reading a website (or tweet, or newsletter) cannot normally see the alt-text attached to images, but assistive technologies such as screen readers—which people who have low vision or who are blind use to consume digital content—read alt-text aloud, enabling users to more fully understand what is being communicated on the page. As Hannah Wise writes at the Reynolds Journalism Institute, alt-text is part of journalism.
The main reason for a publication to use alt-text is that it makes content more accessible to people with certain visual or cognitive disabilities. Alt-text also displays in cases where a user has blocked images or where images fail to load. Search engines also index alternative text, so its use has relevance for SEO considerations.
The guidance materials on this page are adapted from the alt-text guidelines used at The Open Notebook. (Please see below for links to sources used in developing these guidelines. For more detailed guidance, we particularly recommend the “Alt Decision Tree” produced by the Web Accessibility Initiative.)
When to Use Alt-text
Wherever it is appropriate to do so (more on that below), attach alt-text to images in:
- Articles and other pages at the publication website
- Newsletters
- Pop-ups
- Social media posts with attached images
Some images do not need any alt-text. Most notably, alt-text is usually not necessary for purely decorative images that don’t add any information to a page or in which the alt-text would be redundant with surrounding text (for example, in the image caption or nearby text). This might include, for example, stock images that don’t carry any meaningful information but merely make the page more visually appealing. Similarly, alt-text is usually not necessary for decorative icons, line separators, or other images that merely create visual ambiance and don’t carry any informational value.
Where to Put Alt-text
The process of inserting alt-text into image descriptions is usually straightforward:
- In content-management systems such as WordPress, you will find a field for entering alternative text along with other image attributes, such as captions and credits.
- Email marketing platforms such as Mailchimp, Substack, and Constant Contact also have a field for alt-text along with other image details.
- Most pop-up software providers also make it easy to add alt-text to images, usually by clicking on the relevant field in the pop-up editor.
- Finally, it’s also easy to add alt-text to social media posts for which you are manually attaching images. (It’s not necessary to add alt-text in social media posts where the images are being pulled automatically from the linked site.) For example, on Twitter, add alt-text using the “image description” field. On Facebook, click on “edit” when you add the image, then select “Alternative text.” (Facebook also suggests default alt-text, but this is often not suitable.)
How to Write Alt-text
- Be succinct. Roughly speaking, alt-text should be one to two sentences—around the length of a tweet, or less, if possible. Fewer than 125 characters is the ideal, but not always possible. Remember that the entire contents of your alt-text will be read aloud by a screen reader, so don’t bog down your audience with overly wordy alt-text.
- Include only the most relevant visual details. It’s not practical to include every visual detail in a photo or illustration. Use your judgment to decide which details to include.
- Describe only what is in the image. Don’t provide additional context that is not visually apparent; such context belongs in an image caption.
- Don’t simply repeat the image caption. Such redundancy would be annoying to users
- Use correct grammar and punctuation. Capitalize the first word, and end alt-text descriptions with a period. Don’t use quotation marks or apostrophes within alt-text, as browsers will interpret these punctuation marks as the end of the alt-text, making it not render properly.
- Don’t write “Photo of…” or “Image of…” at the beginning of your alt-text. Users already know that an image is being described, so this text adds needless verbiage. (At The Open Notebook, we do write “Illustration of…,” “Map of…” or similar, where applicable, to make clear that the image is not a photo.)
- For infographics, charts, and maps: Focus on what is of highest informational value. Rely on surrounding text and captions to provide further information.
- For images that contain words: Type the words verbatim (within space constraints).
- For images that serve as links to another page (such as a logo that points to an organization’s website, or a thumbnail image that links out to the full document): Explain what happens when the user clicks the image. (e.g., “The Knight Foundation,” or “Marked-up document.”)
- Don’t perpetuate stereotypes through image descriptions.
- Be intentional and consistent in decisions about whether to provide physical descriptions of people such as their race, age, hair color or style, weight, style of dress, or other aspects of general appearance. (The question of whether to include such descriptions in alt-text is not fully settled within image-description and audio-description circles. Some argue that images of people should include physical characteristics such as age, race, hair color, style of dress, and so on, as these provide detail about what is shown. Others believe physical descriptions are not a priority, given the demand for succinctness. We encourage every newsroom to study and weigh these questions for itself. Any such descriptions should be used for all people, not just some.)
Some Examples of How to Use Alt-text in Media Stories
Below are examples of some common journalistic contexts in which the decision about whether and how to use alt-text arises. These examples are not exhaustive. For a more thorough discussion, see the resources below.
Headshots with No Informative Context
For a simple headshot in which the caption includes the person’s name and in which the photo includes no informative contextual information, alt-text is not necessary because it would be redundant with the caption.
Alt-text: None
Images That Are Entirely (or Mostly) Decorative
It’s not always necessary to provide either captions or alt-text for images (such as stock photographs or illustrations) whose purpose is decorative. However, if the image content reflects a concept that is meaningful to the story, and/or if it is the lead image in a story, alt-text can enrich users’ experience.
Example 1
Alt-text (optional): Rod-shaped E. coli bacteria, colorized in orange.
Example 2
Alt-text (optional): A peacock displaying to a peahen, who is looking back at the peacock with apparent interest.
Example 3
Alt-text (optional): A woman sitting, arms around knees. Puzzle pieces form gaps at the edges of her body. A supportive hand reaches toward her.
Images That Convey Information
Photos that are more substantially informative should include alt-text. It’s rarely possible to describe every visual element of an image, so pick those elements that are most important in the context of the story.
Example 1
Alt-text: A healthcare worker wearing white surgical gloves pricks a patient’s finger.
Example 2
Alt-text: A man collects nuts into a large sack, his back to the camera. Four researchers talk in the background.
Example 3
Alt-text: A woman wearing a backpack stands, smiling and facing the camera and away from the water, on an ocean beach.
Example 4
Alt-text: Collage of 9 people wearing face masks, goggles, or face shields. One image in the collage says 9 MIRADAS. [Note that in this alt-text example, “9 MIRADAS” is not in quotation marks; this is because using these punctuation marks within alt-text will make the text not render properly.]
Example 5
Alt-text: A man stands at a podium labeled Second International Summit on Human Genome Editing. Scientific data appear on a screen behind him.
Infographics, Charts, and Maps
Impart as much information about the content of infographics, charts, and maps as practically possible. Don’t just explain what the graphic is about; describe key aspects of the information within. In many cases, it is not possible to fully describe the information provided in a chart or figure; focus on what is of highest informational value. Rely on surrounding text and captions to provide further information.
Example 1
Alt-text: A map showing U.S. states as hexagons in shades of green. New Mexico, West Virginia, and Alaska are the darkest hexagons.
Example 2
Alt-text: A word cloud in which the most prominent words are pandemic, will, end, people, vaccinate, COVID-19.
Logos
The alt-text should be the name of the organization/website. Many experts argue that it is not necessary to add words such as “logo,” “website,” or “home page,” as people using screen readers will assume that a linked image whose alt-text is the name of an organization or website is pointing to a home page. It is also not necessary to say “link to…” because screen readers already announce to users that they are on a link.
Alt-text: NASA.
Resources We Used to Create This Guide
This guide to alt-text draws on a number of useful resources:
- Web Accessibility Initiative: “An Alt Decision Tree“
- Reynolds Journalism Institute: “Alt-text Is Journalism: Enhancing Your Reporting with Accessibility”
- WebAIM: “Alternative Text”
- This excellent Twitter thread by Patrick Garvin
- Harvard University guide to using alt-text
- “Alt Text As Poetry,” by Bojana Coklyat and Shannon Finnegan
(Editors’ Note: Many thanks to writer and editor Kerry Kijewski, a person with lived experience using a screen reader, for serving as a paid consultant in the early development of these guidelines. Any errors or omissions remain the responsibility of The Open Notebook.)
