Alt text is the alt attribute on an HTML image that expresses the image’s purpose or information when the image cannot be seen.
Alt text is a text equivalent for an image. In HTML it is the alt attribute on an img element; in practice, its job is to preserve the image’s purpose when a reader cannot see it. A screen reader can announce it, a text-only or low-bandwidth view can expose it, and search systems can use it with the surrounding page to understand an image. It is not a field for repeating a target query or an isolated ranking lever.
Purpose, not keywords
The same pixels can need different alternatives in different contexts. A photo of a blue mug in a product listing may need its product name, colour and material. In an article about office habits, the useful fact may be that the mug sits beside a notebook. If the photo only decorates a paragraph that already states the same fact, the correct alternative can be empty: alt="". W3C’s image guidance makes this distinction by purpose: informative images describe essential information, functional images describe the action or destination, and decorative images get a null alternative.
- Informative image
- State the information the reader would otherwise miss: “Blue ceramic mug beside a notebook on a desk.”
- Functional image
- Name the action or destination: “Open the checkout” is more useful than “shopping-cart icon.”
- Decorative image
- Use alt="" when it adds no information and is not an interactive control.
- Complex chart or diagram
- Use a short summary in alt and put the findings, labels and data in nearby text or a linked description.
Choose the right alternative
Start with the page’s message, then decide what role the image plays. This avoids the common failure of describing a pretty detail while omitting the fact needed to understand the page. For a chart, a label such as “Monthly sign-ups” is rarely enough; the body should also state the trend and values that matter. For an image link, Google documents that the image’s alt text is used as anchor text, so the alternative should communicate the destination or action. A decorative image inside a link is different: the link still needs an accessible name from visible text or another reliable label.
| Image use | Useful alternative | What to avoid |
|---|---|---|
| Product photograph | Specific product, distinguishing variant and visible state | A sales slogan or a repeated shopping query |
| Button with an icon | The action, such as “Download report” | “Blue arrow” |
| Chart | Brief conclusion plus nearby text with full data | A long sequence of values crammed into alt |
| Decorative divider | Empty alt attribute | A filename or a generic “decoration” |
Write and check alt text
Write the alternative after the image is placed beside its final copy. Keep it short enough to be heard as part of the sentence, place the key distinction early, and use terms readers already see in the page when they are relevant. Do not set a universal character target: an icon may require two words, while a product image can need a short sentence. If the concept cannot be expressed concisely, make the longer explanation visible in the page content.
- Classify the image as informative, functional, complex or decorative in its final page context.
- Draft the smallest phrase that preserves its purpose; remove “image of” and other framing that adds no meaning.
- Compare the alternative with the caption, heading and adjacent text so it neither contradicts nor merely repeats them.
- Inspect the rendered HTML for an img element and the intended alt value; image URLs and a CMS media title are not substitutes.
- For a representative template, listen with a screen reader or inspect the accessibility tree, then sample repeated components and missing-image cases.
I distinguish an image that carries meaning from decoration, then write alt text for the meaning rather than stuffing a filename or keywords into it. That practice is a review method, not proof that every image on a site is accessible; a complete review also checks rendered templates, linked images and editorial workflows.
Limits and common mistakes
Alt text helps accessibility and gives search systems a relevant clue, but it cannot repair an inaccessible control, a blocked image, irrelevant page copy or a missing text explanation for a complex visual. Google uses the page context, captions and other signals as well as alt text to understand images. Treat image discovery and image landing-page quality as separate checks.
- Do not use a filename, a CMS title or a keyword list as an alternative.
- Do not assume every non-empty alt is better: decorative imagery should normally be skipped with alt="".
- Do not make alt carry legal instructions, data or a call to action that exists nowhere else on the page.
- Do not reuse the same generic alternative for unrelated product images simply because a template accepts it.
- Do not claim that adding alt text guarantees web rankings, image inclusion or an accessibility conformance result.