Skip to content
InsideUX Design
Accessibility 18 min read

Alt Text That Actually Helps: How to Describe Images for Everyone

Good alt text does not describe what an image shows but what it does in that spot. How to handle decorative, informative, functional and complex images, and which myths you can safely forget.

Picture the product page of a small online shop for outdoor gear. Let’s call it “Summit Joy.” Someone who cannot see visits the page with a screen reader and has it read aloud. It sounds roughly like this: “Link, graphic, logo.” Then: “Graphic, IMG underscore 4711 dot JPG.” Then a button with no name, followed by another one. Below the product photo comes “Graphic, red rain jacket women buy cheap waterproof rain jacket red.” And at the bottom of the page there is a chart comparing the waterproof rating of four jackets. All that gets read out is: “Graphic, chart.”

If you can see the page, you notice none of this. If you are listening to it, after a minute you still don’t know what the jacket looks like, which button puts it in your cart, or whether it keeps out more rain than the cheaper model. That person will buy somewhere else.

This article shows you how to write alt text that actually helps people. It covers the WCAG requirement, the W3C decision tree, the different kinds of images and a few stubborn myths, for example about length. Summit Joy serves as a running example throughout. The shop is made up, but typical.

What alt text is and what it has to do

Alt text is a short text version of an image. In HTML, it lives in the image’s alt attribute. A screen reader, software that reads screen content aloud or outputs it to a braille display, reads this text in place of the image. Search engines use it too, and browsers display it when an image fails to load.

The foundation for all of this is the Web Content Accessibility Guidelines, or WCAG. The very first success criterion, 1.1.1 “Non-text Content,” says that all non-text content presented to users needs a text alternative that serves the equivalent purpose. It is a Level A criterion, which makes it part of the minimum requirements. Two exceptions matter most in everyday work. Controls such as buttons need a name that describes their purpose. And purely decorative content should be implemented so that assistive technology can ignore it.

The key word is “purpose.” Alt text is not supposed to describe what an image shows. It is supposed to do the job the image does in that particular spot. That may sound like hair-splitting, but it is the key to almost every question that follows.

How much work remains is shown by the annual “WebAIM Million” report. WebAIM is a non-profit center at Utah State University that has worked on digital accessibility since 1999. For the report, the home pages of the top one million websites are tested automatically. In the 2026 edition, 53.1 percent of those home pages had at least one image with missing alt text. The average home page had 66.6 images, and 16.2 percent of them lacked alt text. That made missing alt text the second most common failure, behind low-contrast text.

The W3C decision tree

The W3C’s Web Accessibility Initiative (WAI) offers a decision tree that quickly leads to the right answer for most images. At its core are four questions you ask in order:

  1. Does the image contain text? If the same text is already present nearby or the text is only there for visual effect, the image gets an empty alt attribute. If the text has a function, such as an icon, the alt text describes that function. If the text is not available anywhere else, it goes into the alt text word for word.
  2. Is the image part of a link or button, and would it be unclear what that link or button does without the image? Then the alt text describes the link destination or the action.
  3. Does the image add meaning to the page? For simple photos and graphics, a short description of that meaning is enough. For charts and complex information, the content also belongs somewhere else on the page. If the image only repeats nearby text, the alt attribute stays empty.
  4. Is the image purely decorative? Then it gets an empty alt attribute.

If an image does not fit any of these, the tree points you to the full WAI images tutorial. For daily work, though, it is enough surprisingly often. Above all, it makes you ask the right question: not “What is in the image?” but “What is the image doing here?”

Decorative, informative, functional: the three basic types

The WAI tutorial distinguishes seven kinds of images in total. You will run into three of them all the time.

Decorative images

An image is decorative if it adds nothing to understanding the page: a wavy divider line, a blurred mountain panorama behind a heading, a stock photo that is only there for mood. These images get an empty alt attribute, alt="". Screen readers then skip them.

The difference between empty and missing matters. An empty attribute says: “You can ignore this image.” A missing attribute says nothing at all, and some screen readers fall back to reading out the file name. That is where the “IMG underscore 4711 dot JPG” in the example comes from. Conversely, WCAG also treats alt text on a decorative image as a failure, because it distracts screen reader users from the actual content.

Informative images

Informative images convey something that matters for the page: the product photo, the portrait in an interview, the photo of an accident scene in a news story. Here, the alt text briefly describes the information the image carries. WebAIM’s advice: usually just a few words, rarely a short sentence or two.

Functional images

An image is functional when it sits inside a link or button. In that case, the alt text is the only thing a screen reader learns about the link or button. So it has to describe the function, not the appearance. WAI gives two classic examples: a linked logo without other link text gets something like “W3C home,” and a printer icon on a button gets “Print this page.” If the same link already contains the name as text next to the logo, the logo’s alt attribute stays empty so nothing is read twice.

You do not need phrases like “link to” or “click here for” either. The screen reader already announces that it is a link. Icon buttons built with SVG or icon fonts often have no alt attribute at all. Their name then comes from ARIA or from visually hidden text, for example. The rule stays the same: the name describes what happens.

At Summit Joy, it looks like this:

  • Before: Logo in the header with alt="Logo". Cart icon and heart icon as buttons with no name.
  • After: Logo with alt="Summit Joy home". The buttons are called “Cart, 2 items” and “Add to wish list.”

Images of text and complex images

Two more types show up regularly in shops and magazines. According to WAI, images of text should generally be avoided, with logos as the exception. If you cannot avoid one, the alt text contains exactly the words shown in the image. Summit Joy had its size chart on the product page as an image. A real HTML table is better here, because everyone can read it, zoom it and search it.

Complex images are charts, maps or diagrams. For these, WAI recommends a two-part approach. The alt text briefly identifies what the image shows and says where the full description can be found. The long description itself lives in the regular page content: right below the chart, in a caption using figure and figcaption, or on a separate linked page. For charts with numbers, a data table is usually the best long version.

WebAIM describes the older longdesc attribute for long descriptions as deprecated and advises against using it. aria-describedby has a limitation as well: WAI points out that the referenced content is read as one continuous paragraph. Headings and tables get lost along the way.

Summit Joy’s waterproof rating chart therefore gets the alt text “Bar chart: waterproof rating of four rain jackets compared, values in the table below.” Directly below the chart sits a small table listing the four jackets and their ratings. That helps sighted people who want the exact numbers, too.

Context decides: one photo, three alt texts

Because alt text conveys an image’s purpose, there is no single correct text for a photo. It depends on where the photo appears. WebAIM illustrates this with a photo of astronaut Ellen Ochoa. If the image accompanies text about her achievements, “Astronaut Ellen Ochoa” is enough. If the caption “Ellen Ochoa, Astronaut” sits right next to it, an empty alt attribute is the best choice, because everything would otherwise be read twice.

Research backs this up. For the 2020 CHI conference, Abigale Stangl, Meredith Ringel Morris and Danna Gurari interviewed 28 blind and low-vision people about what they want from image descriptions. The images came from news sites, social networks, online shops, job sites and dating platforms, among others. The finding: which details people want depends heavily on where an image appears and why they are looking at it.

Summit Joy uses the same photo in three places: a woman in a red rain jacket on a mountain ridge, with thick clouds in the background. Each place needs a different text:

  • Product page: This is about the jacket. “Red rain jacket with hood and high collar, worn in the rain in the mountains, the hem reaches just below the hips.”
  • Magazine article about thunderstorms in the Alps: This is about the weather. “Hiker on a ridge in heavy rain, low clouds hiding the peaks.”
  • Team page: This is about the person. “Lena, product manager at Summit Joy, testing a rain jacket in the Bavarian Alps.”

None of these texts is wrong. What would be wrong is using one of them in all three places. Yet that is exactly what happens when alt text is stored once in the media library and travels everywhere from there.

How long can alt text be?

Few alt text rules get repeated as often as this one: “No more than 125 characters, because screen readers cut off the rest.” It appears in style guides, SEO guides and the help text of some tools. There is no evidence for it. Neither WCAG nor the HTML specification sets a character limit.

Accessibility expert Eric Eggert, who previously worked with WAI on its documentation and co-edited the decision tree, looked into the claim in 2022. His conclusion: no screen reader simply cuts off alt text. The JAWS screen reader merely splits long texts into several shorter chunks. Eggert suspects the 125-character rule grew out of exactly this splitting, which someone mistook for truncation. So the number is folklore, not a technical limit.

That does not make long alt text a good idea. Eggert’s rule of thumb sums it up well: as succinct as possible, as detailed as needed. If you find you need more than two sentences, that usually signals a complex image. The description then belongs in the page content, where it can have paragraphs, lists and tables. A useful test, also from Eggert: would your text be enough over the phone for someone to roughly picture what the image shows in this spot?

Why “image of” is redundant

A lot of alt text starts with “image of,” “photo of” or “graphic showing.” It is well meant, but it says the same thing twice. Screen readers already announce an image as a graphic or image. Hearing “Graphic, image of a rain jacket” gives you the same information two times. WebAIM explicitly advises against these openers.

There is one exception: when the type of image is itself important. For a painting, an illustration, a screenshot or a historical photo, that may be exactly the information. “Oil painting: storm over the Matterhorn” makes sense, “Image: storm over the Matterhorn” does not. WebAIM also notes that the word “logo” is usually unnecessary, since it adds nothing to the content or function.

The WebAIM Million shows how common these placeholders are: 10.8 percent of images that had any alt text at all had questionable or repetitive alt text. That includes values like “image,” “graphic” or “blank,” file names, and text that merely repeats what sits right next to the image.

AI-generated alt text: helpful, but not finished

Automatically generated image descriptions have been around for a while. In 2017, Facebook published a study of its “Automatic Alt-text,” which uses image recognition to name faces, objects and themes. In a two-week field study with about 9,000 people using the iOS app with VoiceOver, the test group found photos easier to interpret. The models have improved a lot since then. In 2024, Mozilla started testing a locally running alt text model in Firefox’s PDF editor.

That example shows clearly where the limits lie. Mozilla itself calls its generator “far from perfect” and designs the flow so that people review and confirm the suggestion. The draft is meant to help them focus their edits on missing context and details.

Context is exactly what an image model lacks when all it gets is the image. It sees pixels, not purpose. It does not know whether the photo sits on the product page or in the thunderstorm article, whether it is decorative, or that the woman in it is called Lena. At the 2024 ASSETS conference, Ananya Gubbi Mohanbabu and Amy Pavel showed that descriptions work better when the model also takes the surrounding page content into account. Their twelve blind and low-vision participants rated these context-aware descriptions significantly higher than context-free ones.

In practice, this means:

  • AI suggestions are a draft, not a result. Someone who knows why the image is on the page reviews and trims them.
  • A person decides whether an image is decorative. A model will happily describe the wavy divider line too.
  • For functional images, an image description helps little. A model sees a heart. What is meant is “Add to wish list.”
  • You have to add names, product names and facts that are not visible in the image.

SEO is a side effect, not the goal

Alt text has a reputation as an SEO tool, and that is not entirely wrong. In its image search guidelines, Google says it uses alt text along with computer vision and the content of the page to understand what an image is about. For linked images, alt text also acts as anchor text.

In the same breath, though, Google warns against keyword stuffing in alt attributes. It says this leads to a negative user experience and may cause a site to be seen as spam. Google’s own example: instead of a string of terms about puppies and dog food, “Dalmatian puppy playing fetch” is the best version. WebAIM puts it more fundamentally: alt text is not the place for information directed at search engines.

At Summit Joy, the supposed conflict resolves itself:

  • Before: “red rain jacket women buy cheap waterproof rain jacket red”
  • After: “Red rain jacket with hood and high collar, worn in the rain in the mountains, the hem reaches just below the hips.”

The second version contains the relevant terms naturally and helps people who cannot see the jacket. If you write for people, you usually write well enough for search engines too.

Alt text in everyday editorial work

Good alt text rarely fails because of missing knowledge. It fails because of the workflow. Images get uploaded under time pressure, the alt field is optional or hidden, and whoever writes the text often does not know where the image will end up. A few adjustments help:

Write the alt text where the image is used. Many content management systems offer an alt text field in the media library. That is useful as a suggestion, but as the red jacket example shows, an image in different places often needs different texts. Check whether your system allows alt text per use and whether a media library value is copied when the image is inserted or pulled in automatically later. That determines where changes take effect.

Make “decorative” a deliberate choice. An empty field is ambiguous: forgotten or intentionally empty? An option like “Image is decorative” that deliberately sets an empty alt attribute is better. A plain required field without this option, on the other hand, quickly leads to placeholders like “image” that help no one.

Let the right people write it. The person who chose an image knows its purpose best. That is usually the editorial or product team, rarely the developers. Developers, in turn, take care of logos, icon buttons and components that are built correctly once in a design system and then reused everywhere.

Short guidance right in the input field. A sentence like “What should someone know about this image in this spot?” often achieves more than a long guideline in the wiki.

Spot checks with a screen reader. Automated testing tools reliably detect missing alt text, but not whether existing text makes sense. A few minutes with NVDA, VoiceOver or TalkBack on a typical page reveal more than any report. The article Accessibility Testing: Tools and Methods describes what these checks look like.

For online shops serving customers in Germany, like Summit Joy, the German Accessibility Act (Barrierefreiheitsstärkungsgesetz, BFSG) has applied since 28 June 2025. It is Germany’s implementation of the European Accessibility Act. The article BFSG in Practice explains what it requires. Good alt text is one of the easiest steps, because it costs little and works immediately.

Limits and pitfalls

Alt text solves a lot, but not everything. A few traps come up again and again.

Images that are not an img. CSS background images, icon fonts and some SVG graphics have no alt attribute. As long as they are decorative, that is fine. If they carry information, say a banner reading “20 percent off all jackets today” set as a background image, that information is missing for everyone who cannot see the screen.

Duplicate information. When the caption and the alt text say the same thing, everything is heard twice. WebAIM recommends not repeating caption content in the alt text. The alt text then only adds what the caption leaves out.

Too much interpretation. Alt text describes what matters for the purpose and judges as little as possible. “Happy customer” is a claim, “Woman laughing and holding a cup of tea” is a description. Where mood really is the purpose of an image, though, it can be described.

Trying to replace images entirely. Some content cannot be captured in a sentence, such as a detailed site map or an infographic with twenty values. A better alt text will not help here. A different format will: a table, a list, a paragraph. For the many other aspects beyond images, see Why Accessibility Is More Than Contrast and Font Size.

Conclusion

Good alt text answers a single question: what should someone who cannot see the image know about it in this spot? For decorative images, the answer is “nothing,” and the alt attribute is deliberately left empty. For informative images, it is the key message. For functional images, it is the destination or action. For complex images, it is a brief pointer plus a full version in the page content.

Summit Joy needed no new technology for its overhaul. The logo now audibly leads to the home page, the buttons have names, the jacket is described instead of keyword-tagged, and the chart has gained a table. The same photo tells the story of the jacket on the product page and the story of the weather in the magazine. The page now sounds the way it looks. And in the end, that is the whole point.

Checklist

  • Every img has an alt attribute, and decorative images have a deliberately empty one.
  • The alt text describes the image’s purpose in this spot, not just its content.
  • Linked images and icon buttons name the destination or action, such as “Summit Joy home” or “Add to wish list.”
  • Text in images appears word for word in the alt text or, better, as real text on the page.
  • Charts have a short alt text and a full version, ideally as a table.
  • No “image of,” no “logo,” no file names, unless the type of image itself matters.
  • Caption and alt text do not repeat each other.
  • Length follows need: as succinct as possible, as detailed as needed, with no fixed character limit.
  • AI suggestions are reviewed by someone who knows the context.
  • No keyword lists in the alt attribute.
  • The CMS allows alt text per use and offers an explicit option for decorative images.
  • Typical pages are regularly spot-checked by listening to them with a screen reader.

Sources

Back to “All articles”

You might also like

Why Accessibility Is More Than Contrast and Font Size

Accessibility

Contrast and font size are just the tip of the iceberg. Why real accessibility starts with semantics, keyboard access and clear language, and why it benefits everyone in the end.

The BFSG in Practice: What Germany’s Accessibility Act Means for Websites and Apps

Accessibility

Since June 2025, Germany’s BFSG also applies to online stores, banking apps, and booking platforms. Who is affected, what’s technically required, and how your team can get started.

Screen Reader Testing: How to Check Your Website with VoiceOver and NVDA

Accessibility

Screen reader users move through a page by headings, landmarks and links. How to turn on VoiceOver and NVDA and test your own website in 20 minutes.