Alternative text gives a text equivalent for an image when that image communicates information or performs an action. Good alt text is not a caption for every picture and is not a place to insert search keywords. It should help someone understand the information or purpose they would otherwise miss, while keeping repeated or decorative content from becoming noise.
Decide what the image is doing
Before writing alt text, consider the surrounding content and the image's role. Ask: does it convey information that is not already available nearby? Does it act as a link or button? Is it only decoration? The same image may need different treatment in different contexts because its purpose changes with the page.
- Informative image: describe the important information, not every visual detail.
- Functional image: describe the action or destination, such as “Download the annual report”, rather than “arrow icon”.
- Decorative image: use an empty alternative (
alt="") so assistive technology can skip it. - Complex image: provide a concise identification plus the longer explanation, data table or equivalent in the page content.
Write concise, context-aware descriptions
Start with the essential message and use natural language. Avoid phrases such as “image of” or “picture showing” unless the fact that it is a photograph, diagram or artwork matters. There is no universal character limit; keep the alternative as short as the information allows, and put detailed explanations in adjacent text instead of creating a long, difficult-to-navigate alt attribute.
For example, on a page explaining an audit workflow, “Three steps: agree scope, test key journeys, then document and re-test fixes” may be more useful than a visual inventory of every icon. If the same sentence already appears immediately beside the image, a redundant alternative may add no value.
Give charts and diagrams an equivalent
A chart's alternative should communicate its takeaway, not only its type or colours. For a chart used to compare completion rates, state the relevant comparison and provide the underlying values in a nearby accessible table when those values matter. For a process diagram, describe the sequence and decision points in text. Ensure the text equivalent stays updated when the visual changes.
Do not hide important labels, axis values or relationships inside an image if they can be provided as real text. This also helps people viewing the page on small screens, enlarging text or printing the content.
Use empty alt for decorative images
For a decorative image in HTML, use an empty alt attribute (alt=""); do not omit the attribute, since some screen readers may announce a filename when no alternative is supplied. CSS background images are generally ignored by assistive technology, so never put essential information only in a background. If a background image conveys meaning, provide the same information in text.
Review linked images and repeated icons
When an image is the only content of a link, its alternative should communicate the link's purpose. When a visible text link already names the destination and a nearby icon is decorative, hide the icon from the accessibility tree or give it empty alt so the link name is not repeated. For buttons that contain an icon, make sure the button itself has a clear accessible name.
Alt text supports people first
Search engines may use alt text as one signal to understand an image, but keyword stuffing makes descriptions less useful and can damage trust. Describe the image in the context of the page, use relevant terms only when they naturally belong and make sure the page's visible text explains its subject as well.
Include image alternatives in content reviews and test a sample with images disabled or a screen reader. For a broader review of inclusive page content, see our WCAG accessibility guide or ask us about an accessibility assessment.