# How to Write Meaningful Image Alt Text

Traditional Chinese version: [https://accesserty.com/ai/guides/writing-meaningful-alt-text.md](https://accesserty.com/ai/guides/writing-meaningful-alt-text.md)

Page version: [https://accesserty.com/en/guides/writing-meaningful-alt-text/](https://accesserty.com/en/guides/writing-meaningful-alt-text/)

Last updated: 2026-10-03

Good alt text does not describe every visible detail. It communicates the information users need in the page context.

## Summary

- First decide whether the image is decorative, informative, actionable, product-related, chart-like, or text-as-image.
- Alt text should cover what users would miss if they cannot see the image.
- AI can draft suggestions, but humans still need to confirm context, accuracy, and tone.

## Start with purpose, not visual description

The same image may need different text in different contexts. A decorative brand image may not need to be announced; a product image may need style, color, or state; a chart may need trend and key values.

## Common patterns

Use these categories to decide the direction quickly.

- Decorative images: usually use empty alt text to avoid noise.
- Informative images: provide the necessary information the image carries.
- Images inside links or buttons: describe the purpose when the image supplies the only name; avoid duplicating equivalent visible text.
- Product images: describe appearance, state, or differences that affect choice.
- Charts: summarize the conclusion and provide nearby data or full text when needed.

## One logo, two contexts: the image is the home link

Consider this website’s logo. When the image is the only content of a link, the reader needs its destination, not just “black logo.” This is an HTML fragment for this site; replace the image path, site name and home URL for your own website.

```html
<a href="/en/">
  <img src="/images/logo.svg" width="160"
    alt="Accesserty home">
</a>
```

The expected link name is “Accesserty home.” Using alt="" here would remove the name supplied by the link’s only content. Even with a name, verify that the URL actually leads home.

## The same logo beside equivalent link text

When the same link already says “Accesserty home” and the logo adds no information, empty alt text avoids duplicating the name. Empty alt is not the same as omitting alt. Do not make every image’s alt empty just to remove scan findings.

```html
<a href="/en/">
  <img src="/images/logo.svg" width="160" alt="">
  Accesserty home
</a>
```

The expected link name is still “Accesserty home,” now supplied by visible text. Inspect the whole link’s name rather than only the image’s alt attribute, then use a screen reader to check that the purpose remains clear without duplication.

## What to check when using AI suggestions

DevCheck can help generate image alternative-text suggestions, but AI does not fully know the image’s role on your page. Before using a suggestion, check whether it captures the point, over-describes, misses the action purpose, or uses the wrong tone.

AI is optional. When you start it, DevCheck sends a bounded sample of page text, link names and surrounding text, plus selected readable images and naming context to Google Gemini—not just the image you are looking at. URLs within sampled content are not automatically redacted. Avoid sending confidential, personal or unauthorized information. Local scans and manual review remain available without AI. The “Before using AI, check where your data goes” link below explains the recipients and processing.

## Do not turn alt text into a fixed formula

Alt text does not have one correct length or format for every image. A more reliable question is: if users cannot see the image, what information needed for the task would they lose? If the answer is nothing, the image may be decorative. If the answer is product difference, action purpose, chart conclusion, or important text, the alt text should fill that gap.

## Next steps

- [Color contrast checks before release](<https://accesserty.com/en/guides/color-contrast-checks-before-release/>) — Review text, focus, error, and selected states, distinguishing essential icons and boundaries from decoration and genuinely inactive-control exceptions.

- [Web accessibility remediation plan](<https://accesserty.com/en/guides/web-accessibility-remediation-plan/>) — Organize next steps by user task, impact scope, owner, repair level, and re-test method.

## Related pages

- [Accesserty DevCheck](<https://accesserty.com/en/devcheck/>) — Run browser-based checks on local builds, staging pages, authenticated screens, and interactive states.

- [Before using AI, check where your data goes](<https://accesserty.com/en/data-handling/>)

- [Alt text glossary page](<https://accesserty.com/en/glossary/alt-text/>)

- [W3C WAI functional image examples](<https://www.w3.org/WAI/tutorials/images/functional/>)

- [Accessibility testing before launch guide](<https://accesserty.com/en/guides/accessibility-testing-before-launch/>)

- [Automated accessibility checks limits guide](<https://accesserty.com/en/guides/automated-accessibility-checks-limits/>)

- [Web accessibility checker](<https://accesserty.com/en/web-accessibility-checker/>) — Check real pages, authenticated states, and interactive states before release.

- [Understand WCAG check results](<https://accesserty.com/en/wcag-compliance-tool/>) — Review WCAG A/AA issue clues, severity, affected elements, and remediation hints.

- [Accessibility practice and maintenance guides](<https://accesserty.com/en/guides/>) — Browse guides by practical task: public signals, pre-release checks, post-launch maintenance, and standards limits.