What alt text is for
Screen readers read the alt text in place of the image. It also shows when an image fails to load, and search engines use it. 1.1.1 Non-text Content requires a text alternative that serves the same purpose as the non-text content. So what counts is the purpose in context: the same photo needs different text in a product listing than in a blog post about your team.
The decision tree
Work through the questions in order. The first “yes” decides.
- Does the image contain text? If the same text is also on the page as real text:
alt="". If not: use that text as the alt text. Better still, use real text instead of an image of text (1.4.5 Images of Text). - Is the image a link or a button? Then the alt text describes the destination or action, not the look: “Home” for a linked logo, “Search” for a magnifying glass.
- Does the image carry information not available otherwise? A photo, a meaningful icon, a simple graphic: describe the essentials in one short sentence.
- Is it a complex image such as a chart, map or flow diagram? Put the key message in the alt text and the details as text or a table right below, or on a linked page.
- Is it purely decorative, or does the text next to it already say the same? Use an empty
alt=""so screen readers skip it.
A missing alt attribute is always wrong: many screen readers then read out the file name.
Real-world examples
| Image | Purpose | Alt text |
|---|---|---|
| Linked logo in the header | goes to the home page | “Company name, home” |
| Product photo | shows what you buy | “Navy canvas backpack with two front pockets” |
| Mood photo beside a heading | decoration | empty: alt="" |
| Magnifier icon in the search button | starts the search | “Search” |
| Bar chart | shows a trend | key message in alt, figures as a table below |
<a href="/"><img src="logo.svg"></a>
<img src="summer-party-2026.jpg"
alt="image"><a href="/">
<img src="logo.svg" alt="Company name, home">
</a>
<img src="wave-decoration.svg" alt="">Linked images describe the destination; decoration gets an empty alt attribute.
How to write good alt text
- Short and specific: usually one sentence. What would you say on the phone to someone who cannot see the image?
- Skip “image of” or “photo of”: the screen reader already says it is an image.
- Do not repeat a caption that sits right next to the image.
- No keyword lists for search engines. They are tiring to listen to and help nobody.
- Match the page language: a French page gets French alt text.
SVG, icon fonts and CSS backgrounds
An inline SVG that carries meaning gets role="img" and a name via aria-label or a <title> element. Decorative SVGs get aria-hidden="true". CSS background images are invisible to assistive technology; if they convey information, add text as well. For icon-only buttons, the name belongs on the button itself (4.1.2 Name, Role, Value).
<button><svg>…</svg></button><button type="button" aria-label="Open menu">
<svg aria-hidden="true" focusable="false">…</svg>
</button>Alt text in day-to-day publishing
Most missing alt texts are not a coding problem; they happen when someone uploads an image to the CMS. Make the alt text field visible, explain it to your editors and check new pages regularly. Automatic image descriptions can give you a first draft, but they do not know why the image is on your page; a person should review every one. The same applies to images in PDFs: see our guide Accessible PDFs.
Checklist
0 of 7 done
Your ticks stay in this browser tab only and are not stored anywhere.
Related WCAG criteria
- 1.1.1 Non-text Content
- 1.4.5 Images of Text
- 2.4.4 Link Purpose (In Context)
- 4.1.2 Name, Role, Value
- 1.3.1 Info and Relationships
Tools and patterns for this
- ChecklistsFor design, code and content
- Accessible PDFs: what really mattersForms, price lists, annual reports: many sites publish key content as PDF. Those files must meet the same requirements as the pages that link to them.
- Free checkTest your home page automatically in two minutes
- Criteria encyclopediaAll 55 WCAG criteria explained
Frequently asked questions
How long can alt text be?
WCAG sets no fixed limit. A short sentence works well in practice. If you need much more, the image is probably complex and needs a description in the page text.
What about images that editors upload without alt text?
Then the information is missing. Make the field mandatory in your CMS, or at least prompt clearly for it, and check new content regularly.
Can I generate alt text automatically?
As a draft, yes. But a machine does not know the purpose of the image on your page. Review and edit every suggestion.
Sources
How does your website do?
The free check tests your home page in two minutes. The audit decides all 55 criteria, by a person.