Good alt text conveys what an image contributes to the page, in context, in as few words as that takes. Sometimes that is a sentence, sometimes a link destination, and sometimes nothing at all. The W3C’s guidance says the right alternative depends on the image’s “usage, context, and content”, so the same photo can need different alt text on different pages.
Start with the W3C decision tree
The W3C’s images decision tree asks questions in order.
- Does the image contain text? If the same text is nearby as real text, or the image is only for visual effect, use an empty alt. If the text is not provided elsewhere, include it in the alt.
- Is it inside a link or button? Then describe the destination or action, not the picture.
- Does it add meaning? For a simple photo or graphic, write a brief description conveying that meaning. For a graph or complex information, provide the information elsewhere on the page.
- Is it purely decorative? Use an empty alt, written
alt="", so assistive technology skips it.
The four main types
Decorative
Dividers, background flourishes and images that repeat adjacent text. Use alt="". Keep the attribute present but empty rather than omitting it, which is the standard way to mark an image as decorative.
Informative
Write the essential information. For a product photo, a cafe might write “Ceramic pour-over coffee set with a wooden stand” rather than “coffee”. Mention what matters to the page’s purpose: colour if the shop sells colour options, setting if the article is about the venue.
Functional
A magnifying glass icon that opens search should have alt text such as “Search”, not “magnifying glass”. A logo linking to the home page might say “Home” or the business name plus “home page”, depending on the page. The W3C guidance is to describe the function, such as the destination of a link or the action of a button, rather than the appearance.
Complex
Charts, diagrams and infographics need more than a caption-length alt. The W3C says to provide “a complete text equivalent of the data or information provided in the image”, elsewhere on the page. Keep the alt short, for example “Bar chart of enquiries by month, described in the text below”, and put the data in a table or paragraph.
Writing rules that hold up
- Be specific and brief. The W3C gives no fixed character limit for informative images, only a requirement to convey the essential information.
- Describe purpose, not decoration. Ask what a reader who cannot see the image would miss.
- Do not stuff keywords. Google’s SEO starter guide recommends short, descriptive alt text that explains how the image relates to the surrounding content.
- Do not repeat the caption. If a caption or nearby text already says it, the alt may be empty.
- Put text from an image into the alt when it is not elsewhere, and prefer real styled text over text baked into images.
- Keep it plain. Avoid guesses about emotions or identities you cannot verify.
Before and after
| Situation | Weak | Better |
|---|---|---|
| Team photo on an About page | “team” | “Four staff standing in front of the shopfront” |
| Phone icon linking to a number | “phone icon” | “Call us” |
| Decorative wave divider | “blue wave graphic” | empty alt |
| Sales chart | “chart” | “Line chart of sales by quarter; data table follows” |
Checking your work
The W3C’s preliminary checks note that tools can detect missing alt attributes, but deciding whether the text is appropriate needs a person to look at the image in context. Review alt text on key pages by reading it with images switched off. For a fuller process, see how to audit a website for accessibility.
Alt text is one small part of a site that works for everyone. It sits alongside the clarity and structure covered in what makes a modern business website convert, and it is worth preserving during a rebuild: planning a redesign without losing SEO value explains how.
Where Radiance Impact fits
Radiance Impact’s Technology division builds and maintains business websites. If you would like image and content accessibility considered in a rebuild, contact the team or see Digital Technology and AI Solutions.
Sources
- Images Tutorial: Decision Tree, W3C Web Accessibility Initiative
- Images Tutorial, W3C Web Accessibility Initiative
- Easy Checks: A First Review of Web Accessibility, W3C Web Accessibility Initiative
- SEO Starter Guide, Google Search Central
