Good image alt text describes the information or function an image adds to a page. It is primarily an accessibility feature, not a place to insert keywords. The best alt text gives someone who cannot see the image enough context to understand what matters without repeating information that is already available nearby.
This guide explains how to write useful alt text for photos, graphics, logos, icons, product images, charts, and other common website images.
What Is Image Alt Text?
Alt text is the value of an HTML image’s alt attribute. Assistive technologies can use it as a text alternative when an image conveys information or performs a function.
Alt text is different from an image filename, caption, title attribute, or a description stored in a media library. Those fields can have other purposes. The alt attribute should be written for the role the image plays in its specific page context.
The First Question: What Is the Image For?
Before writing anything, decide which of these categories best describes the image:
- Informative: the image adds information that the surrounding text does not provide.
- Decorative: the image adds visual styling or atmosphere but does not add information.
- Functional: the image is a link, button, icon, or other control that performs an action.
- Complex: the image contains substantial information, such as a chart, diagram, map, or detailed infographic.
- Image of text: the words shown in the image themselves are important to understanding the content.
This distinction is more useful than following a fixed character count or trying to optimize every image for a keyword.
How to Write Alt Text for Informative Images
1. Describe what matters in the context
Ask what a person who cannot see the image needs to know to understand the page.
Weak: “mountain bike”
Better: “Black and blue mountain bike on a forest trail”
The second version provides useful context without describing every visual detail.
2. Keep it concise, but do not chase an arbitrary character limit
There is no universal “100-character” or “125-character” rule that makes alt text correct. Write enough to communicate the important information and stop when the essential meaning has been conveyed.
For a simple photo, that may be a short phrase. For a more meaningful image, a slightly longer description may be appropriate. If the image contains substantial information, put the detailed information in the page content rather than trying to squeeze everything into the alt attribute.
3. Use natural language
Write alt text as a normal human description. Avoid keyword strings, awkward fragments, or language written only for search engines.
Instead of: “red dress women red dress casual red dress online”
Use: “Woman wearing a red casual dress”
4. Include keywords only when they accurately describe the image
If a relevant keyword naturally belongs in the description, there is nothing wrong with using it. Do not add a keyword merely because it is the target query for the page.
For example, if a page genuinely shows a “Business Central dashboard,” that phrase can be useful alt text. An unrelated decorative image should not be given the same phrase simply to reinforce a keyword target.
5. Do not start with “image of” or “picture of”
Screen readers generally already identify an image as an image. The useful part of the alternative is the information the image conveys.
Less useful: “Image of a project manager reviewing a dashboard”
Better: “Project manager reviewing a project dashboard”
When an Image Should Have Empty Alt Text
Decorative images should normally use an empty alt attribute, written as alt="". This allows assistive technologies to skip the image instead of announcing irrelevant visual content.
Examples include decorative background images, visual flourishes, stock imagery that adds no information, or an image that simply repeats information already provided in nearby text.
Do not omit the alt attribute entirely when the image is intended to be ignored. An empty alt="" explicitly tells assistive technology that the image is decorative.
How to Write Alt Text for Functional Images
If an image is the only content of a link or button, describe the destination or action, not just what the image looks like.
Example: A magnifying-glass icon used as a search button should use alt text such as “Search,” not “magnifying glass.”
Likewise, if a logo is the only clickable element leading to a company’s homepage, the alternative can communicate the destination, such as “Seeromega home.” If the logo sits beside visible text that already identifies the destination, the image may be decorative in that context.
Alt Text for Logos
A logo does not automatically need the same alt text in every location. Consider its function:
- Linked logo with no other link text: describe the destination or function, such as “Seeromega home.”
- Logo next to visible brand text that already provides the same information: an empty alt value may avoid unnecessary repetition.
- Logo used as an informative image in an article: describe the relevant brand or organization if that information matters to the content.
How to Handle Charts, Graphs and Infographics
Complex images should not rely on a short alt attribute to communicate all their information. Use concise alt text to identify the image and provide the important details in surrounding text, a table, a caption, or another accessible long description.
For example, instead of trying to place every value from a sales chart into the alt attribute, write something such as “Bar chart showing quarterly sales growth from Q1 to Q4,” then provide the relevant figures and trends in text below the chart.
Images That Contain Text
When text inside an image is important and is not available elsewhere as real HTML text, the alternative should communicate that text. Whenever practical, use real HTML text instead of putting important copy inside an image. Real text is easier to resize, search, translate, and access.
Product Images
For product images, describe the product in a way that helps someone understand which item or variant is shown. Depending on context, useful details can include the product type, model, color, size, or other distinguishing information.
Do not turn product alt text into a keyword list. If the product name already appears next to the image and the image adds no additional information, an empty alt value may be more appropriate.
Common Alt Text Mistakes to Avoid
- Keyword stuffing: adding multiple search phrases that do not naturally describe the image.
- Generic descriptions: using “image,” “photo,” or “picture” without explaining what matters.
- Unnecessary detail: describing clothing, colors, background objects, or facial features that have no relevance to the page.
- Repeating nearby text: duplicating a caption or heading word-for-word when the image is already adequately explained.
- Using filenames as descriptions: “IMG_8392.jpg” does not help a screen-reader user understand the image.
- Leaving functional images unlabeled: a button or linked image needs an accessible name that communicates its action or destination.
- Putting complex data only in alt text: charts and infographics often need a fuller text equivalent elsewhere on the page.
- Using the same alt text for every image: each image should be evaluated in its actual context.
Alt Text and SEO
Alt text can help search engines understand images, but accessibility and meaning should come first. Do not treat alt attributes as a keyword-placement field or assume that adding more keywords will improve rankings.
A better SEO workflow is to make the image itself relevant to the page, use descriptive filenames when appropriate, provide useful surrounding text and captions where helpful, use accurate alt text, and ensure the image can be discovered and rendered correctly.
For a broader technical image-optimization workflow, see our guide to optimizing images for the web without losing quality.
A Simple Alt Text Checklist
- Does the image add information or perform a function?
- If yes, what is the most important information a user needs?
- Can that information be stated naturally in a short description?
- Is the image decorative or redundant? If so, use
alt="". - Is the image a link or button? Describe the destination or action.
- Is it a chart or complex graphic? Provide the detailed information elsewhere on the page.
- Does the alt text contain unnecessary keywords, filenames, or visual details?
- Would the description still make sense if the image could not be seen?
Bottom Line
Effective alt text is short when the image is simple and more detailed when the information requires it. The goal is not to hit a character limit or add a target keyword. The goal is to provide an equivalent text alternative that preserves the image’s meaning or function for people who cannot see it.
For accessibility guidance, see the W3C Web Accessibility Initiative Images Tutorial.
