How to Write Alt Text for Images: Products, Buttons, Charts, and Decorative Graphics

Imagine a photograph of a white ceramic mug with a blue band. On an online store, the image helps customers understand what the product looks like. On a design article, it might demonstrate how a blue accent contrasts with a neutral surface. On another page, the same photograph could be purely decorative because the surrounding text already provides everything readers need.

The image pixels have not changed. But the appropriate alternative text may be different in all three situations. That is the most important principle of writing useful image descriptions:

Alt text should communicate the purpose and meaning of an image in its particular context, not simply list everything visible in the picture.

This guide explains how to make that decision for product photographs, functional icons, linked images, charts, diagrams, and decorative graphics. It also shows how to review descriptions for accessibility and search usefulness without treating word count or keyword density as a substitute for good writing.

What alt text actually does

Alternative text, commonly called alt text, is a textual alternative associated with an image. For an ordinary HTML image, it is supplied through the alt attribute. When a person uses a screen reader, appropriate alternative text can communicate information that would otherwise be available only through the image. Alternative text can also be presented when an image is unavailable, depending on the browser and circumstances.

Search engines may use it alongside the page's content and other signals to understand an image. But alt text is not a general-purpose hidden description field where every visible detail should be recorded. Its purpose depends on the image's role. The W3C Web Accessibility Initiative distinguishes informative, functional, decorative, and complex images because those categories require different treatment.

A photograph describing a product is not equivalent to an arrow used as a button. A graph containing business data is not equivalent to a decorative background illustration. The first decision is therefore to identify what information or function the image contributes to the page.

A practical decision table

Before writing a description, classify the image.

This is a starting point rather than a mechanical classification system. Some images serve more than one purpose. A company logo can communicate brand identity and also link to the homepage. A product photograph can communicate its appearance while functioning as a link to a product-detail page. When roles overlap, examine what the user needs in order to understand or operate that part of the page.

Example 1: a product photograph

Return to the white ceramic mug with a blue band. Suppose the photograph appears on a product-detail page. The visible characteristics may matter because customers want to inspect the item's appearance before purchasing. Compare three descriptions.

The third version communicates relevant visible information. It identifies the item, color, distinctive design, and viewing angle. It does not make unsupported claims about durability, materials beyond what is known, or customer satisfaction. If the image shows a specific feature that matters to the purchase decision, include it.

For example, a second product photograph might use: Side view of the ceramic mug showing its rounded handle and blue band This is more useful than giving both images identical descriptions. The descriptions help distinguish why a person might need to examine one angle rather than another.

Don't invent product details

Alt text should not introduce facts that the image or reliable product information cannot support. A photograph of a mug cannot establish that it is dishwasher-safe, hand-painted, or made from a particular certified material. Those properties require appropriate product evidence. If a photograph's purpose is to show the exterior, describe the exterior. Put technical specifications in the product information where they can be verified and presented clearly.

A useful description communicates visible information without inventing a sales claim.

Example 2: the same photograph, three different contexts

Context changes what matters. Imagine the exact same mug photograph reused on different pages.

The first description focuses on product identification. The second focuses on the color relationship being discussed. In the third situation, repeating the same information may add no value. If removing the illustration would not remove meaningful content or functionality, it may be decorative in that context.

This is why automatically copying one alt description into every appearance of an image can be inadequate. The image file is the same. The editorial purpose is not.

Example 3: images used as buttons

Now consider a small magnifying-glass icon. On a website, it may appear inside a control that starts a search. The goal is not to teach the user what a magnifying glass looks like. The goal is to communicate what selecting the control will do. If the image itself supplies the control's accessible name, a suitable text alternative is:

Search An alternative such as Black magnifying glass icon is less useful because it describes the picture rather than the action. The same principle applies to other controls.

The wording should match the actual action. A trash-can icon that removes a product from a shopping cart might need Remove item from cart rather than the broader Delete item. The user should not have to infer the function from the visual metaphor.

What if the button already contains text?

Suppose a button contains a download icon followed by the visible words Download PDF. If those words already provide the control's accessible name, the icon may be decorative. In that case, giving the icon another equivalent text alternative can cause unnecessary repetition. The goal is one clear accessible name, not multiple announcements of the same action. This distinction is important when reviewing modern interfaces containing icons beside ordinary text.

Example 4: clickable images

Consider a product photograph that links to its product-detail page. If the image is the only content inside the link, its alternative text needs to make the link's destination understandable. For example: View details for the blue-band ceramic mug This communicates what activating the link does. But the appropriate implementation also depends on the surrounding content.

If the same link contains visible text such as Blue-band ceramic mug — View details, and that text already provides a complete accessible name, the image may not need to repeat it. The W3C's functional-image guidance provides examples of both situations. The important question is:

Would someone who cannot see the image still understand where the link goes?

If not, the accessible name needs to provide that information. Avoid describing only the photograph when the user's immediate task is navigation.

Example 5: charts need more than a short sentence

Charts are different from ordinary product photographs. Imagine a column chart showing monthly signups for a fictional website. The values are:

These numbers are invented for this teaching example. A weak alternative might be: Chart A more useful short alternative could be: Bar chart of monthly signups: 120 in January, 180 in February, and 150 in March For a simple chart containing only these values, that may communicate the essential information adequately. But suppose the chart contains twelve months, multiple series, annotations, and comparisons. Trying to squeeze every value and relationship into one alt attribute can become difficult to understand. For complex graphics, the W3C recommends providing a short text alternative and making the detailed information available elsewhere. That might mean:

• A nearby data table.
• A clearly written summary of important trends.
• A dedicated detailed-description section.
• An accessible representation of the information.

The short alternative identifies the chart and its purpose. The accompanying text provides the deeper information that cannot reasonably fit into a brief description.

Don't reduce data to an unsupported conclusion

Consider writing: Chart showing excellent business growth That may sound positive, but it does not necessarily communicate the data. In the example above, signups rise from January to February and then fall in March. A more precise summary is: Signups increased from 120 in January to 180 in February, then decreased to 150 in March This describes the actual pattern. The word excellent introduces a judgment rather than explaining the visual evidence. Useful chart descriptions prioritize meaningful relationships and accurate values.

Example 6: infographic covers and educational diagrams

An infographic may contain several panels, arrows, labels, and numerical examples. For example, a graphic explaining image resolution might compare a 600-pixel source with a 1200-pixel source displayed at the same CSS size. A short alternative could identify the comparison: Comparison of 600-pixel and 1200-pixel images displayed at the same width, illustrating sharper detail on high-density screens But if the infographic contains additional calculations, limitations, and instructions, the short sentence cannot reasonably communicate every element. The article should explain those details in accessible text.

A reader should not need to extract important instructions from the image alone. This is especially relevant for technical blog covers. A cover may be visually useful while containing more information than a concise alternative can convey. The best approach is to let the article carry the complete explanation.

The cover's alternative then identifies its main subject and contribution. That also makes the article more usable when the image fails to load or is difficult to read on a small screen.

Example 7: images containing words

Suppose a promotional graphic contains the words:

Workshop registration closes Friday, 16 October.

If this deadline appears nowhere else, it is essential information. Someone unable to read the image still needs to know it. The alternative text or an equivalent text presentation should communicate the deadline. However, there is a better general practice. Place important words, deadlines, instructions, and conditions in actual page text whenever practical.

Then the image can support the message visually without being its only source. This matters because text inside an image may become difficult to read when scaled down. It also creates additional work when content needs translation or revision. If a graphic contains complicated instructions, reproducing its meaning in normal text is often more robust than placing an extremely long transcription inside the alt field. Alt text and readable page content should work together rather than compete.

When an empty alt value is correct

A common misconception is that every image must have a written description. That is not how accessible image markup works. If an HTML image is purely decorative, an empty alternative can be appropriate. The usual form is alt="". That is different from omitting the alt attribute altogether.

The empty value intentionally communicates that the image does not require a spoken text alternative. The W3C explains that omitting the attribute can cause some assistive technologies to announce the filename instead. Consider a decorative wave pattern separating two sections of an article. It does not communicate a fact or provide an action.

A screen reader announcing “Blue curved wave on light gray background” might interrupt the reading experience without adding useful information. The empty alternative is often the better choice.

Decorative does not simply mean attractive

A beautiful photograph can still communicate important information. A visually simple icon can perform an essential action. The correct classification depends on purpose, not artistic complexity. Ask whether the image contributes something users would otherwise miss. If it does, supply the relevant alternative. If it does not, an empty alternative may be appropriate.

Alt text is not a caption, filename, or description field

Several pieces of image information are often confused.

These can support one another. They should not be treated as interchangeable. A caption may explain where a photograph was taken. The alt text might describe the important visual subject. For example, a photograph caption could say: Product photograph from the autumn collection. Its alt text could say:

White ceramic mug with a blue band and rounded handle The caption supplies publication context. The alt text supplies the relevant appearance. If the caption already communicates everything important about a redundant image, an empty alt value may be appropriate instead. Avoid repeating entire captions automatically.

Does alt text help image SEO?

Alt text can help search engines understand an image. Google Search Central recommends useful, information-rich descriptions that fit the surrounding page and use relevant terms naturally. However, Google also warns against keyword stuffing. Compare these two examples.

Keyword-stuffed:

ceramic mug coffee mug best mug cheap mug online mug blue mug kitchen mug gift mug

Descriptive:

White ceramic mug with a cobalt-blue band and rounded handle The second description explains the image more effectively. It also includes relevant terms without repeating them unnaturally. Good image SEO depends on more than one attribute. Google also considers the page's surrounding content and other information when interpreting images. Adding keywords to every image does not guarantee search rankings, traffic, or indexing. A useful principle is:

Write for the person who needs to understand the image. Let relevant search terms appear naturally when they help describe it.

Accessibility and search usefulness often support the same goal, but they are not identical ranking or compliance systems.

Is there a maximum alt-text length?

You may encounter recommendations that all alt text must contain fewer than a particular number of characters. There is no single universal 125-character requirement that makes every longer description invalid. Some tools, content-management systems, and accessibility-testing rules may impose or recommend their own limits. Those constraints can matter in a particular publishing workflow.

But a short description is not automatically good, and a longer one is not automatically bad. The appropriate length depends on the image's purpose and complexity. For many simple informative images, one concise sentence is enough. For complex graphics, the better answer is often a short alternative plus detailed information elsewhere.

If your CMS limits the alt-text field to a specified number of characters, respect that interface requirement without treating it as a universal accessibility law. Word count is useful for editing. It cannot decide whether the description communicates the right information.

Using Anvil Tools Word & Character Counter

The Anvil Tools Word & Character Counter can help when drafting or reviewing image descriptions. Paste a proposed alternative into the text field. The tool reports words, characters, characters excluding spaces, sentences, paragraphs, and estimated silent reading time. It processes the text locally in the browser.

For example, you might begin with: Photograph of a beautiful, attractive, modern, stylish white ceramic mug with an elegant cobalt-blue decorative band and a conveniently shaped handle After reviewing the purpose of the image, you could simplify it to: White ceramic mug with a cobalt-blue band and rounded handle The shorter version removes unnecessary subjective adjectives while retaining useful identifying details. The tool can help you inspect the text as you revise. However, it does not determine which details matter, detect redundant descriptions, or validate WCAG conformance.

Understand its counting method

Anvil Tools counts words using whitespace boundaries. Its character count uses JavaScript UTF-16 code units. That means some symbols and emoji may count differently from what a user considers one visible character. If a content-management system applies its own length rule, its count may differ.

For a strict publishing-field limit, the receiving CMS's validation is authoritative. Use the Word & Character Counter as an editing aid, not as a guarantee that another system will accept exactly the same length. For a separate explanation of those counting differences, see How Our Word Counter Counts Emoji, Accents, and Chinese Text.

An editorial review of six common mistakes

Before publishing a set of image descriptions, check for these problems.

These checks are not an automated pass/fail test. They are editorial questions designed to help the author improve the information available to the reader. The final decision should always consider the actual page.

A repeatable workflow for website editors

When preparing product pages, articles, or application interfaces, follow this sequence. Identify the role. Determine whether the image is informative, functional, decorative, or complex. Read the surrounding content. Check which information is already available as text. Write the essential alternative. Describe the meaning, visible property, action, or destination that users need.

Remove redundancy. Avoid repeating entire captions, filenames, and adjacent labels without a reason. Check factual accuracy. Make sure colors, objects, relationships, numbers, and product details match the actual image and reliable source information. Provide detailed data separately when necessary. Charts and complicated diagrams may need accompanying text or tables.

Review the published implementation. Verify that the CMS saves the intended alternative and that the actual image element or accessible control exposes it appropriately. Test where practical. Use accessibility inspection and assistive-technology testing to confirm how the result behaves in its real context. A successful character-count check is not the final verification. The published page and its accessible output are what matter.

The final question before pressing Publish

Every image exists on a page for a reason. Sometimes that reason is to show a product's appearance. Sometimes it is to explain a process. Sometimes the image activates a control. Sometimes it is simply decorative. Alt text becomes useful when the author identifies that reason and communicates the relevant information without requiring the reader to see the pixels. The strongest descriptions are therefore not necessarily the longest or most keyword-rich. They are the ones that answer:

What would someone miss if they could not see this image?

If the answer is a product feature, describe it. If the answer is an action, name it. If the answer is complex data, provide an accessible explanation. If the answer is nothing important, an empty alternative may be correct. That approach produces more useful content than automatically generating a caption for every image and calling the job finished.

Try the relevant text tool

Writing image descriptions for a website, online store, or educational article? Use the Anvil Tools Word & Character Counter to review your draft's length while editing. Then check the description against the image's actual purpose and surrounding content. The counter measures text; it does not replace accessibility testing or editorial judgment.

Further reading

• W3C WAI — Images Tutorial
• W3C WAI — Alt Decision Tree
• W3C WAI — Informative Images
• W3C WAI — Decorative Images
• W3C WAI — Functional Images
• W3C WAI — Complex Images
• Google Search Central — Image SEO Best Practices