Image Accessibility: How to Write Useful Alt Text

Good alt text does not describe every visible pixel. It communicates the information or function a person would miss if they could not see the image.

That distinction is why the same photograph may need different alt text on two pages. A picture of a chef might identify the chef on a staff page, explain a cooking technique in a recipe, or add no new information to a decorative banner. The image file stays the same, but its purpose changes.

Learning how to write alt text therefore begins with context—not a character counter or a list of SEO keywords. This guide explains the main image types, provides practical image alt text examples, and shows how accessibility and search optimization can work together.

What Is Alt Text?

Alt text is the textual replacement supplied through an image's HTML alt attribute:

<img
  src="ceramic-artist.webp"
  alt="Ceramic artist shaping a bowl on a pottery wheel"
>

Screen readers can announce this text, and browsers may display it when an image cannot load. It also gives search systems contextual information about the image. Alt text is not a tooltip, caption, filename or place to hide keywords.

The W3C Web Accessibility Initiative emphasizes that the right alternative depends on an image's usage, context and content. A useful test is to remove the image mentally and ask: What meaning or function has disappeared? Your answer is the starting point for the alt text.

The Quick Alt Text Decision Guide

This is a practical summary, not a substitute for judgment. The official W3C alt decision tree is useful when a case is unclear.

How to Write Alt Text in Five Steps

1. Identify why the image is present

Do not begin by listing objects. Begin with the page's purpose. Is the image teaching something, showing a product, identifying a person, starting an action or simply setting a mood?

For a recipe, alt="Chef holding a pan" may be less useful than alt="Chef tilting the pan to fold the omelette in half". The second version communicates the technique the image supports.

2. Keep only the relevant details

Mention details that change the user's understanding: the subject, action, setting, relationship, visible text or important state. Leave out background details that do not matter.

For an online store, useful details may include product type, color, material and distinguishing design. They usually do not include every shadow, prop or studio surface.

3. Write for the current context

Imagine reading the page aloud over the phone. Insert the proposed alt text where the image appears. Does the page still make sense? Does the text repeat the preceding sentence word for word? Does it omit the point the image demonstrates?

This read-aloud method follows the practical advice in the W3C's image accessibility tips.

4. Be concise, but include what matters

There is no universal rule that every alt description must stay below exactly 100 or 125 characters. Concision is valuable because people should not have to listen to unnecessary detail, but an arbitrary limit should not remove essential meaning.

Aim for a short phrase or sentence. If an image needs a paragraph, table or structured explanation, it is probably a complex image and needs a separate long description.

5. Check the text without viewing the image

Hide the image or ask someone who has not seen it to read the page with the alt text. Can they understand the image's contribution? This final check catches vague phrases such as alt="product photo" and descriptions that depend on visual assumptions.

Image Alt Text Examples by Type

Informative images

Informative images add meaning that can be expressed briefly. Describe that meaning rather than producing an inventory of objects.

Use a person's name only when the person is identified and that identity matters. Avoid guessing ethnicity, disability, gender, emotion or other personal characteristics that are uncertain or irrelevant.

The W3C guidance for informative images notes that the alternative usually conveys the image's meaning, not necessarily a literal description.

Functional images and linked images

A functional image initiates an action or acts as the only content of a link. Describe what happens, not what the icon resembles.

<button type="submit">
  <img src="magnifying-glass.svg" alt="Search">
</button>

alt="Search" is more useful than alt="Magnifying glass". Similarly, a logo that is the only content of a homepage link could use alt="ImgTask home" rather than alt="ImgTask logo".

If a visible text label already names the same action, the icon is often decorative:

<button type="submit">
  <img src="magnifying-glass.svg" alt="">
  Search
</button>

This avoids hearing “Search, Search.” The W3C functional image guidance recommends expressing the action or destination because that is what users need.

Decorative images

A decorative image adds styling or atmosphere but no information needed to understand or operate the page. Give it an empty alt attribute:

<img src="blue-wave-divider.svg" alt="">

The quotes must be truly empty—do not insert a space. The attribute should not be omitted. With alt="", assistive technology can ignore the image; when alt is missing, some screen readers may announce a filename or URL instead.

Possible decorative images include borders, background flourishes, stock photos that merely create ambience, or an icon that repeats adjacent link text. When practical, design-only visuals can instead be CSS background images.

“Decorative” is determined by purpose, not appearance. A flower photo could be decorative in a newsletter header but informative in a plant-identification guide.

Complex images, charts and diagrams

A chart, map or detailed diagram usually contains too much information for one alt sentence. Use alt text to identify the visual and summarize its main point, then provide the data or explanation in nearby HTML.

<figure>
  <img
    src="quarterly-sales-chart.webp"
    alt="Bar chart showing annual sales growth with a temporary decline in Q2. Data table follows."
  >
  <figcaption>
    Quarterly sales: Q1—$82,000; Q2—$74,000;
    Q3—$91,000; Q4—$108,000.
  </figcaption>
</figure>

For a data-rich chart, a real HTML table is often more navigable than a long sentence. Explain trends and conclusions in the surrounding article as well. The W3C recommends a short description plus a textual representation of the essential information for complex images.

Images of text

Whenever possible, use real HTML text styled with CSS. Real text can resize, reflow, be selected and adapt to user preferences more reliably than words baked into an image.

If essential words appear only in the image, include them in the text alternative. If the same wording is already presented beside the image, use empty alt text to prevent duplication. A logo is a common exception: its brand wording may be the appropriate alternative when it identifies the organization.

Alt Text and SEO: What Actually Helps?

Accessible alt text and useful image SEO usually point in the same direction: accurate, contextual language written for people.

Google says it uses alt text with page content and computer-vision systems to understand an image. Its image SEO documentation recommends useful, information-rich descriptions with keywords used appropriately—and warns against keyword stuffing.

That means a primary keyword can appear when it truthfully describes the image in context. It should not be forced into every image.

Bad:

<img src="boots.webp"
     alt="buy boots best boots cheap boots leather boots online boots">

Better:

<img src="boots.webp"
     alt="Black leather Chelsea boots with low heels">

Alt text is only one image-search signal. Descriptive filenames, relevant surrounding copy, captions where useful and an appropriate page topic also provide context. ImgTask's complete website image optimization guide explains how accessibility fits with file format, dimensions, compression, responsive delivery and page performance.

Do not give decorative images keyword-filled alternatives for SEO. That creates noise for screen-reader users and misrepresents the image's purpose.

Common Alt Text Mistakes

Starting with “image of” or “picture of”

Screen readers generally identify an image as an image, so this opening is usually redundant. Describe the meaningful subject directly. Mention the medium only when it matters—for example, “Oil painting of…” in an art-history discussion.

Copying the filename

alt="IMG_4829.webp" does not explain the image. The filename and alt attribute serve different purposes.

Repeating the caption

A caption is visible to everyone and may add commentary, credit or context. Alt text replaces the image's relevant visual meaning. They can complement each other, but identical wording may be repetitive.

Using the title attribute instead

The image title attribute is not a reliable substitute for alt. MDN's <img> accessibility guidance advises using figure and figcaption for captions rather than depending on a hover tooltip.

Automatically describing every image

AI can produce a first draft, but it cannot always know why the image was placed on the page. It may invent details, misidentify people or describe a decorative visual that should be ignored. Review generated text for context, accuracy, sensitive assumptions and repetition.

Using one description everywhere

The same media-library asset may have different purposes on different pages. Treat alt text as part of the content instance, not permanent metadata that can never change.

Alt Text Does Not Replace Image Optimization

Accessible images should also load efficiently and remain clear. Resize oversized originals with the ImgTask image resizer, then reduce unnecessary bytes with the image compressor. Choose a suitable format using the guide to JPG, PNG, WebP and AVIF.

These changes do not alter what good alt text should say. Alternative text describes purpose; resizing and compression improve delivery. Keep the alt attribute on the <img> element when using srcset or <picture> so the selected responsive source has the same textual alternative.

How to Review Alt Text on a Website

1. Find images with a missing alt attribute using an accessibility audit or HTML inspection.

2. Review empty attributes manually; automation cannot decide whether an image is genuinely decorative.

3. Read each non-empty alternative with its heading, paragraph, link or button.

4. Confirm image-only controls communicate their action or destination.

5. Check charts and diagrams for an equivalent explanation or data table.

6. Test an important page with a screen reader, not only an automated score.

7. Recheck templates, product components and CMS fields after design changes.

Automated tools are good at detecting missing attributes and some structural problems. Human review is still needed because usefulness depends on context.

Frequently Asked Questions

How long should alt text be?

Make it as short as possible while preserving the image's essential meaning—often a phrase or sentence. Move detailed chart data or complex explanations into visible page content rather than creating a very long alt value.

Should every image have alt text?

Every <img> should normally have an alt attribute, but not every image needs a written description. Meaningful and functional images need useful text. Decorative or redundant images usually need alt="".

What is decorative image alt text?

Use an empty attribute: alt="". This signals that the image does not add necessary meaning and can be skipped by assistive technology.

Does alt text improve SEO?

Accurate alt text can help search engines understand an image and its relationship to the page. It is not a shortcut to rankings. Write for accessibility first, use relevant keywords naturally and avoid stuffing.

Should alt text include colors?

Include color when it distinguishes a product, explains a status, supports the article's point or otherwise matters. Omit it when it adds no useful information.

Can alt text and a caption be different?

Yes. Alt text replaces relevant visual information, while a caption can provide commentary, attribution or extra context visible to everyone. Avoid unnecessary repetition between them.

Write for the Information the Image Contributes

Useful alt text is not the longest description or the version with the most keywords. It is the clearest replacement for the image's purpose in that particular context.

Identify what a non-visual reader would miss, state it naturally, and remove details that do not help. Use alt="" when the image is decorative, describe the action for functional images, and provide a separate text equivalent for complex visuals. That approach creates more accessible pages while giving search engines honest, relevant context.