How to Write Meaningful and Inclusive Descriptive ALT Text for Images

An image carries information. A reader who cannot see the image receives that information only when the page supplies it as text. That text is the ALT text, short for alternative text, the value of the alt attribute on an image. A screen reader reads it aloud, and a Braille display shows it.

Curious how a Blind Person reads and works on a computer? Watch the Screen Reader Demo for Digital Accessibility on YouTube and hear it for yourself.

This guide explains how to write ALT text, and how to divide information between ALT text and the caption, so that Blind People and People with Low Vision receive what each image was published to show. The Web Content Accessibility Guidelines (WCAG) 2.2, published by the World Wide Web Consortium (W3C), set the requirement, and the page on training in the International Accessibility Standards explains where to learn them. For describing people, this guide draws on Blind and Deafblind advocates and on research with Blind and Low Vision participants. The roles of titles and extended descriptions are covered in the guide to ALT text, captions, titles, and extended descriptions.

In the video below, Haben Girma, a Deafblind lawyer and advocate, speaks about Blind People and visual accessibility.

What the Standard Requires

WCAG Success Criterion 1.1.1, a Level A requirement (the most basic level of conformance), calls for content that is not text to have “a text alternative that serves the equivalent purpose.” That phrase leads to five working rules.

1. Write for purpose. Say what the image contributes to the page. W3C asks for the most concise description possible of the image’s purpose, not a list of everything in the frame.
2. Match the context. W3C’s tutorial on informative images states that the author determines the purpose for using the image, so the same photograph can call for different text on different pages.
3. Keep ALT text short and move long content elsewhere. WCAG sets no character limit. W3C advises a long description, a separate text that carries the full information, when a short phrase or sentence is not enough. Many guides, including the Level Access guide to alt text, suggest about 125 characters or fewer because some screen readers may cut off longer text.
4. Leave out words that announce the image. A screen reader already announces an image, so words such as “image,” “icon,” or “picture” add nothing.
5. Use empty ALT text only for decoration. An image that is pure decoration takes alt="" so that access technology can skip it. A photograph of people that the page presents as content is informative and takes a description.

Why a Name Alone Is Not Enough

One common error is to put only a person’s name in the ALT field when adding a photograph of that person. A sighted reader sees the person, what the person is doing, and where. A Blind reader who hears only the name learns none of that. If a name were all the page had to say about the person, the page could print the name and leave out the photograph. The photograph was added for a reason, and the text alternative is how a Blind reader learns that reason.

Suppose a photograph is published with the ALT text “Rue Dalton.” The name does not tell a reader whether Rue is leading a meeting, standing at a podium, or walking with friends. It does not tell how Rue takes part or why the photograph is on the page. The equivalent purpose of the photograph is missing.

The Social Model of Disability places a barrier in the way information is published, not in the reader. A photograph described only by a name is a barrier created by its publisher. Removing it is a service owed to Blind readers and not a favor, a distinction the article on charity versus service develops.

Where Each Piece of Information Belongs

A photograph usually has two text companions, and each has its own job.

• ALT text tells what the image shows and why it is on the page. It serves Blind People and People with Low Vision who use a screen reader or a Braille display, and readers who load a page without its images.
• The caption is visible text next to the image. Readers who can see the image see the caption too, and screen reader users read it in sequence with the image. It is the right place for what a general audience should know about the picture: who is pictured, the event, the date, and why the moment matters, drawn from confirmed facts.

Keep the two from repeating each other. The ALT text does not repeat the names a caption already gives, and the caption does not repeat the visual description. No fact appears in both, so the reader meets each fact once. When an image has no caption, the names move into the ALT text because nothing else on the page carries them. Mark up an image and its caption together with the HyperText Markup Language (HTML) figure and figcaption elements so the caption stays connected to the image.

Example 1: A photograph with a caption

• Photograph: Suppose a photograph shows Rue Dalton, who describes herself as a Blind Black woman, reading a Braille book at a table.
• Caption: “Rue Dalton, who is Blind, reads a Braille book, which uses raised dots read by touch.”
• ALT text: “A Black woman sits at a table with an open book.”
• Why it works: The ALT text carries what the picture shows: the person, her race, and the setting. The caption carries the name, how Rue describes herself, and what Braille is. Each fact appears once.

Example 2: The same photograph with no caption

• ALT text: “Rue Dalton, a Blind Black woman, reads a Braille book at a table.”
• Why it works: With no caption, the name, how Rue describes herself, and the Braille book all go in the ALT text, because nothing else on the page carries them.

Describing People

When an image shows people, the people are usually the reason the image is on the page. Bahá’ís hold that the diversity of the human family is a source of beauty and strength, a principle explained in Unity in Diversity. ‘Abdu’l-Bahá gave a garden as its picture:

“Consider the flowers of a garden: though differing in kind, color, form and shape, yet, inasmuch as they are refreshed by the waters of one spring, revived by the breath of one wind, invigorated by the rays of one sun, this diversity increaseth their charm, and addeth unto their beauty.” -‘Abdu’l-Bahá, Selections from the Writings of ‘Abdu’l-Bahá

A sighted reader sees who is in an image at a glance, and a Blind reader receives only what the text says. When the diversity of the people pictured is evident in the image, it is part of what the image shows, so the ALT text shares it. Leaving it out removes part of the photograph from Blind readers while sighted readers keep it. Race, gender, age, disability, and culture are one diversity, not separate lists, because every person is all of these at once. How a person describes themselves comes first, and what a sighted reader sees fills in only what the person has not said. These practices put that into words:

• Start with how the people pictured describe themselves. Use their words for race, gender, age, disability, and culture, and the terms they prefer, when they have shared them. Where they have not, describe what a sighted reader sees, and ask the person or the source to confirm when you can.
• Say what the people are doing and where. Use neutral words, as the Level Access guide advises, and leave out judgments about how a person looks or feels. The Be My Eyes inclusive language guide likewise advises against sentimental praise.
• Describe each person as a whole, with race, gender, age, disability, and culture together, in the person’s own terms. A young Black woman who uses a wheelchair is one person, so the description keeps her in one phrase and does not split her into separate facts. When the person’s terms are not known, use the most specific term available, and avoid food comparisons for skin tone, as the Anti Racist Audio Description best practice guidance for audio describers advises. The ALT text names the tools everyone recognizes, such as a wheelchair, a white cane, or a walker. The caption names and briefly explains the tools many readers have not met, such as a refreshable Braille display, and states how the person describes their disability, such as Blind or Deaf, when the person has shared it. Describe a tool by how well it works for the person and not as the restoration of a lost ability, as the Be My Eyes guide advises. Use respectful words such as Blind or Low Vision.
• Describe gender as the person has stated it, or as the person presents it when no statement is available, and age only when it is confirmed or unmistakable. Words such as child, youth, and adult serve better than a guess at a number. Name a culture only as the person has named it, such as a heritage, a language, or a community they belong to.
• Put names in the caption when there is one, and in the ALT text when there is not.
• Leave out clothing and hair unless they are part of why the photograph is on the page, such as traditional dress the person wears to express their culture.

Haben Girma gives the reason in two sentences in the description of her video:

“When you provide visual descriptions for videos and photos, don’t skip race. Don’t leave room for assumptions.” -Haben Girma, I’m not white. Honest! Blind people and visual accessibility.

Example 3: A diverse group described as people

• Photograph: Suppose a photograph shows three volunteers planting a garden bed: Aisha Grant, a Black woman who uses a wheelchair; Daniel Kim, an Asian man; and Maria Lopez, a Latina woman.
• Caption: “From left, volunteers Aisha Grant, Daniel Kim, and Maria Lopez at the neighborhood service project.”
• ALT text: “Three people plant a garden bed: a Black woman in a wheelchair, an Asian man, and a Latina woman.”
• Why it works: The ALT text gives each person one phrase that holds race, gender, and the wheelchair together, plus the action. The caption carries the names in order and the event. Each fact appears once.

Example 4: Race and disability described together

• Photograph: Suppose a photograph shows Jamal Brooks, a Black man who is Blind and holds a white cane, and Mei Lin, an Asian woman who is Blind and reads a refreshable Braille display connected to a laptop.
• Caption: “From left, Jamal Brooks and Mei Lin, who are both Blind. Mei reads a refreshable Braille display, which raises dots from a laptop.”
• ALT text: “A Black man holding a white cane and an Asian woman at a laptop sit at a table.”
• Why it works: The ALT text gives each person one phrase that holds race, gender, and the tool together, plus the setting. The caption carries the names, how each describes themselves, and an explanation of the Braille display, the one device many readers have not met. Each fact appears once.

Tailoring Descriptions to Where the Image Appears

In research presented at the 2020 Association for Computing Machinery Conference on Human Factors in Computing Systems, Microsoft researchers interviewed 28 people who are Blind or have Low Vision about the details they want in digital images. The participants wanted different details in different places:

• News: the setting, to convey a sense of place.
• Social networking and dating: more detail about the people pictured.
• Employment: one participant said that knowing the race and gender of the people in photographs of board members would matter on an employer website.
• Online shopping: details of the product.
• Productivity applications and e-publications: people, text, objects, activities, and landmarks.

Participants wanted race described in news, social networking, employment, productivity, and e-publication contexts but not on dating platforms, and gender in news, social networking, shopping, employment, and dating contexts. The findings are qualitative: a detail counts as wanted when at least one participant raised it. They match the WCAG principle in practice. The purpose of an image depends on its place, and the ALT text follows the purpose.

Example 5: One photograph in two places

• Photograph: Suppose a photograph shows a street festival. A wide view shows crowds in a closed street lined with food stalls. At the front stall, a Black woman who uses a wheelchair and a white man serve food to two children. The organizer has no record of the volunteers’ names.
• On a news page reporting the festival’s attendance: “Crowds fill a closed street lined with food stalls.”
• On a page recruiting volunteers: “A Black woman in a wheelchair and a white man serve food at a stall to two children.”
• Why it works: Each ALT text states the purpose of the photograph in that place. The news page calls for the scene. The volunteer page calls for the people and what they are doing.

Book Covers

A book cover is an image of text. W3C’s tutorial on images of text requires the text alternative to contain the same text the image presents. For a cover, that means the title and the author’s name as printed. Add a brief description of the cover art only when it tells a reader something about the book. Leave the genre, awards, and marketing language to the text beside the cover, where every reader can read them. Use the same wording each time the same cover appears so readers meet the same description.

Example 6: A book cover, and a book cover that is a link

• Cover: Suppose a fictional novel titled The Lantern Path, by a fictional author named Dana Whitfield, has a cover showing a lit lantern on a dark road beneath the title in white capital letters.
• ALT text for the cover alone: “Cover of the novel The Lantern Path by Dana Whitfield, showing a lit lantern on a dark road.”
• ALT text when the cover links to the book’s page: <a href="https://example.com">The Lantern Path by Dana Whitfield, book page.</a>
• Why it works: The first version carries the printed words and one detail of the art. The second follows W3C’s guidance on functional images: when an image is the only content of a link, the text alternative states where the link goes.

Logos and Mastheads

A logo or masthead is usually an image of text, and its purpose is to identify an organization or a publication. W3C’s example for a logo that is not part of a link uses the organization’s name alone and notes there is no reason to say that it is a logo. When the logo or masthead links to the home page, its purpose becomes the link, so the ALT text names the destination. Decorative effects such as colors, gradients, shadows, and typography are left out because they are not relevant to what the image says. When the design itself is the subject, as in an article about a redesign, the image carries information, and a short ALT text paired with a long description serves the reader.

Example 7: A masthead, linked and not linked

• Masthead: Suppose a fictional newsletter, Maple Street News, has a banner with its title in bold white capital letters over a blue and purple gradient.
• ALT text when the banner is not a link: “Maple Street News.”
• ALT text when the banner links to the home page: “Maple Street News home.”
• Why it works: Both versions carry the words the banner displays, which is what identifies the publication. The gradient and the typography are not described because a reader does not require them to know which publication this is.

Putting It into Practice

Each step serves a specific group and removes a specific barrier.

1. Ask why the image is on the page. The answer sets the purpose that the ALT text must serve.
2. Write the ALT text so a Blind reader learns what a sighted reader learns from the image, in as few words as the purpose allows.
3. Place names, events, dates, and context in the caption, and move the names into the ALT text only when there is no caption.
4. Move long content, such as the data in a chart, into a long description beside the image.
5. Listen to the page with a screen reader, and ask Blind People in your community what each description gave them and what it left out.

Build these steps into planning from the start through inclusive design, so no image goes out as a promise for later. The work of removing barriers is complete when the person who faced the barrier can use the result.

Also See

• W3C Web Accessibility Initiative Images Tutorial
• Scope: How to write alt-text for image accessibility
• UX Collective: How to write an image description
• The case for describing race in alternative text attributes
• Twitter reminds us about alt-text, but how good are we at it?
• Social Security Administration Guide: Alternate text for images, text in images (2011)

Reflection Questions for Community Builders

1. Choose the last five photographs of people that our community published. For each one, what did the ALT text say the people were doing and where, and what would a Blind reader have known about the photograph if the caption had been missing?
2. Where in our materials does an ALT text hold only a person’s name, and what is a Blind reader missing about why that photograph was included? Who will rewrite those descriptions first, and how will Blind readers confirm that they now work?
3. Which of our photographs show the diversity of our community, and does the ALT text for each describe each person as a whole, with the race, gender, age, disability, and culture that a sighted reader sees in one phrase? Where it does not, what has stopped us from saying what is plainly visible?
4. Where does the same photograph or logo appear in more than one place in our materials, such as a newsletter, a web page, and a social post, and does the description change with the purpose of each place? Who decides, and what have Blind readers told us they want in each?
5. Which of our logos, mastheads, and book covers carry the words they display, and which carry descriptions of color and shape that a Blind reader does not require in order to identify the organization or the book?
6. Who writes ALT text in our community, what have Blind People or the W3C guidance taught them, and where is our practice written down so that the next volunteer writes it the same way?