Alt text: what an image says when nobody can see it

Alt text is the text that takes the place of an image when someone cannot see it — read aloud by a screen reader, output on a braille display or shown when the image fails to load. It goes into the image's alt attribute. What belongs there depends not on the image but on what it does on the page: an image that carries information gets a short description of that information, a linked image gets the link's destination, a purely decorative image gets an empty alt="". The most common mistake is not missing text but wrong text — writing something into every image.

What it is about

The alt attribute sits directly in the image tag:

<img src="dog.jpg" alt="Small dog with its own fur falling over one eye">

WCAG success criterion 1.1.1, level A, requires it: all non-text content needs a text alternative that serves the equivalent purpose. Pure decoration has to be implemented so that assistive technology can ignore it. The W3C names who benefits:

• Screen reader users, who have the text read aloud or rendered as braille.
• Users of speech input, who address an image button by voice command.
• Mobile users, who switch images off to save data.
• Search engines, which would otherwise have a harder time placing the image's content.

The text alternative is determined by the author, depending on the usage, context and content — that is how the W3C itself puts it. There is no text that belongs to an image. There is only one that belongs to an image in a particular place.

The decision before the text

Before you write, classify the image. In its images tutorial the W3C distinguishes, among others:

Type	Example	What goes into alt
Informative	product photo, portrait, simple graphic	a short description of the information
Decorative	background pattern, divider, mood picture	nothing: alt=""
Functional	logo as a link, magnifier as a search button	the destination or action, not the appearance
Image of text	a graphic with a slogan	the text from the image
Complex	chart, infographic, floor plan	a short text plus a full description on the page

The W3C decision tree

The W3C has a decision tree for this. It is more practical than any rule of thumb. Go through the questions in this order:

1. Does the image contain text?

• The text is also present nearby as real text → alt=""
• The text is only a visual effect → alt=""
• The text has a function, for example as an icon → describe the function
• The text appears nowhere else → put the text from the image into alt

2. Is the image in a link or button whose purpose would be unclear without it? → describe the destination or action.

3. Does the image contribute meaning to the page?

• Simple graphic or photo → a short description of the meaning
• Chart or complex information → also present the information on the page
• Only repeats what is next to it as text → alt=""

4. Is the image purely decorative? → alt=""

If you are still unsure afterwards, the four questions from WCAG technique G94 help:

1. Why is this image here?
2. What information is it presenting?
3. What purpose does it fulfil?
4. If I could not use the image, what words would I use to convey the same function or information?

The fourth question is the most useful. It moves you away from describing and towards translating.

What good alt text looks like

Brief but accurate. WebAIM puts it this way: content and function as succinctly as possible, without sacrificing accuracy. There is no fixed character limit.

No "image of" or "photo of". The screen reader announces that it is an image anyway.

No embellishment. "Two tradesmen fitting a window" is better than "Motivated team at work on a high-quality window". Describe what can be seen and what it means — no advertising.

For linked images: the destination, not the appearance. The W3C writes that the text should convey the action that will be initiated rather than describe the image. Its own example: the W3C logo that leads to the home page has the alt text "W3C home".

Keywords only where they fit naturally. More on that in the next section.

What Google does with alt text

Google uses alt text together with computer vision and the content of the page to understand what an image shows. For a linked image it also serves as the link's anchor text.

Google explicitly warns against stuffing alt with keywords: it makes for a poor user experience and may cause the site to be seen as spam. Google's own example shows the gradation:

• bad: a long string of dog breeds and "cheap dog food"
• better: alt="puppy"
• best: alt="Dalmatian puppy playing fetch"

Two more points from the same guide: short, descriptive file names help (black-kitten.jpg rather than IMG00023.JPG), and Google does not index images embedded as CSS backgrounds. For decoration that does not matter. For a product photo it does.

The good news: what is right for screen readers is right for Google too. You do not write two versions.

When the field has to stay empty

This is the half that is regularly done wrong. A decorative image gets the alt attribute, but with no content:

<img src="pattern.jpg" alt="">

Two quotation marks directly after each other. That tells assistive technology: skip this. WCAG gives the reason: text alternatives on such items only distract screen reader users from the content.

Leaving alt out altogether is something else. The W3C writes that some screen readers then announce the file name instead — and IMG-20240517-final-v2.jpg is worse than any description.

A title attribute does not belong on decorative images either. WCAG technique H67 is literally called: null alt text and no title attribute for images that assistive technology should ignore.

CSS is cleaner still. The W3C and WebAIM recommend adding purely decorative images as CSS backgrounds where possible. Then they are not in the content at all. Where that is not possible — for example because the page builder only knows image elements — the empty alt is the right way.

The special case: an image inside a link.

• The link already has text → alt="". The screen reader reads the link text, the image stays silent.
• The link has no text → the alt has to carry the link. The logo that leads to the home page gets alt="Example Company home", not alt="Logo".

The second case is the most common real mistake in this area. WebAIM sums it up: when an image is the only content inside a link, the alt text is all a screen reader has to go on.

The title attribute is not the answer

title creates a small box that appears when the mouse rests on the image. MDN is clear about it: you should not assume the user will ever see it — someone using only a keyboard or a touchscreen does not.

It follows that:

• title is no substitute for alt.
• title should not repeat the alt text — some screen readers would otherwise read the same text twice.
• For a caption there are <figure> and <figcaption>, not title.
• Anything important belongs visibly on the page.

When one sentence is not enough

For charts, infographics and floor plans, alt text is out of its depth. A bar chart with twelve values cannot be translated into one sentence.

The former longdesc attribute is listed as obsolete in the HTML standard. The W3C describes these ways today:

• Present the information on the page: a paragraph under the chart summarising what it says, or a table with the values — ideally held together with <figure> and <figcaption>.
• A link right next to the image to a page with the full description.
• aria-describedby pointing to text elsewhere on the page. The W3C notes the limit: the linked text is read as one continuous paragraph, and headings and tables inside it are lost.

The first way is almost always the best. It hides nothing, helps anyone who does not grasp the chart at once, and makes the numbers findable as real text.

How to check it yourself

Switch images off. Loading images can be switched off in the browser settings. Reload the page: what you read now is roughly what a screen reader user hears.

The WAVE extension. WebAIM's free tool for Chrome, Firefox and Edge marks images without alt, with empty alt and suspicious cases directly on the page. A good first pass.

The logo test. Open the source of your home page with Ctrl+U and find the logo in the header. If its alt says "Logo" or nothing at all while it links to the home page, you have your first finding.

Have it read aloud. NVDA is a free screen reader for Windows. Go through your home page with it once, by keyboard. The first minutes are confusing; after that you hear straight away which images are labelled uselessly.

The WordPress media library — with a catch. Every image in the media library has a field for alt text. But that text is copied into the post when the image is inserted. If you change it later in the library, the image already placed keeps the old text. There is a good reason for this too: the same image can have different jobs in two places. So check and correct the text where the image is — in the block.

What to do

1. Start with linked images. Logo, teaser tiles, image links in overviews. There, wrong alt text makes a link unusable — that weighs more than an undescribed mood picture.
2. Then the informative graphics. Charts get a short text plus the full statement on the page.
3. Then the informative photos: brief, accurate, without "image of" and without keyword strings.
4. Finally, set decorative images to an empty alt — or move them into CSS.
5. Check with WAVE, and once with NVDA.

On AI-generated suggestions: tools that describe an image automatically are a usable starting point. But they describe what can be seen — not what job the image has in exactly this place. Whether an image is decorative or a link, the tool does not know. Reading and shortening is a must.

And one expectation to set straight: alt text is not a project you finish once. Every new image needs the decision again. If you or your staff maintain content, it belongs in the routine — when inserting, not at some point later.

Sources

• W3C WAI, Images Tutorial — image types, who benefits from text alternatives, the text depends on usage and context: w3.org
• W3C WAI, An alt Decision Tree — the questions and outcomes of the decision tree: w3.org
• W3C WAI, Decorative Images — empty alt, file name when alt is missing, CSS background, technique H67: w3.org
• W3C WAI, Functional Images — action rather than appearance, the "W3C home" example: w3.org
• W3C WAI, Complex Images — description on the page, link, figure, aria-describedby and its limit: w3.org
• W3C, Understanding WCAG 2.2: Non-text Content — success criterion 1.1.1, level A, handling decoration: w3.org
• W3C, WCAG technique G94 — the four questions for short text alternatives: w3.org
• WHATWG, HTML Standard: Obsolete features — longdesc on img is obsolete: html.spec.whatwg.org
• MDN, The Image Embed element — title as a tooltip, not for keyboard and touch, no substitute for alt, empty alt: developer.mozilla.org
• WebAIM, Alternative Text — succinct without losing accuracy, no "image of", image as the only content of a link, CSS for decoration: webaim.org
• Google Search Central, Google Images best practices — how alt text is used, anchor text, keyword stuffing as possible spam, file names, CSS images not indexed: developers.google.com
• WebAIM, WAVE Browser Extensions — free for Chrome, Firefox and Edge: wave.webaim.org
• NV Access, Download NVDA — free, for Windows 10 and later: nvaccess.org
• WordPress Trac, ticket 47456 — the media library text is automatically taken over as the post's alt text, although it depends on context: core.trac.wordpress.org
• Image Source Control, Fix missing ALT texts in WordPress — media library and post are not in sync, the text is taken over on insertion: imagesourcecontrol.com