Quick answer
Alternative text (alt text) is a written description of an image, stored in the image's HTML alt attribute. A screen reader announces it instead of showing the image, and a browser displays it if the image fails to load — it's a text equivalent, not a caption or a label.
What is alternative text?
Alt text exists because an image communicates through sight. Someone who can't see the image needs that same meaning delivered another way. Alt text is that other way — a text equivalent, not a caption or a label.
This is why alt text has to describe meaning, not just contents. A photo of a graph showing sales growth needs alt text that says sales grew, not alt text that says "a line going up." The image conveys a fact. The alt text has to convey that same fact.
What is the alt attribute (alt="")?
The alt attribute is the HTML property that actually holds the alt text. It's written directly on the image tag, like this:
<img src="quarterly-report.png" alt="Bar chart showing revenue increased 12% quarter over quarter">The attribute and the text inside it are two different things. "Alt text" is the content people usually mean when they use the term. The alt attribute is the container that holds it. That distinction matters for one specific case: when an image is purely decorative, the right move isn't to leave the attribute out — it's to include it with nothing inside, as alt="". An empty attribute tells a screen reader "this image is decorative, skip it." A missing attribute tells a screen reader nothing, so some screen readers fall back to reading the file name instead.
Why is alternative text important?
Alternative text is the only thing standing between a non-visual user and the meaning of an image. Without it, that meaning simply doesn't reach them — not in a degraded form, but not at all.
That gap shows up in specific, practical ways. A product photo with no alt text means a screen reader user shopping online can't tell what they're about to buy. A chart with no alt text means a blind analyst reading a report has no idea what the data shows. A "submit" button built from an icon with no alt text means a screen reader announces "button" with no indication of what it does — turning a one-click action into a guess.
Alt text also has a legal dimension. WCAG's requirement for text alternatives is one of the criteria most frequently cited in accessibility complaints and lawsuits, precisely because missing alt text is easy to detect and hard to defend. That legal exposure is a downstream effect, though — the underlying reason alt text matters is that it's the mechanism by which an image's meaning becomes available to someone who can't see it.
Who benefits from alternative text?
Alt text is written for screen reader users, but its reach is broader than that single group, and each group benefits for a different reason.
Blind and low-vision screen reader users
Get the primary benefit: a spoken equivalent of the image, delivered at the exact point in the page where the image sits.
Users with images turned off
Common on slow or metered connections — see the alt text rendered as visible placeholder text where the image would have loaded.
Users with cognitive or attention-related disabilities
Sometimes rely on text-to-speech tools even though they can see the screen; alt text gives those tools something accurate to read instead of nothing.
Search engines
Use alt text to understand what an image shows, since a crawler can't interpret pixels the way a person can — a secondary benefit, not the purpose of alt text.
Every user, temporarily
Benefits when an image fails to load — a broken link, a slow server, a typo in a file path — because alt text is what appears in the image's place instead of a blank box.
How do screen readers use alternative text?
A screen reader reads a page through its accessibility tree, not through what's rendered visually. When a screen reader user lands on an image — by tabbing to it, if it's a link or button, or by navigating through content — the screen reader announces the alt attribute's value in place of the image itself.
Most screen readers also announce that the element is an image before reading the alt text, saying something like "image, sunset over a beach" rather than just "sunset over a beach." That's the reason well-written alt text never starts with "image of" or "picture of" — the screen reader has already said "image," so repeating it doubles the announcement for no benefit.
If the alt attribute is empty (alt=""), most screen readers skip the image entirely and move to the next piece of content, treating it as decorative. If the alt attribute is missing altogether, behavior is less consistent: some screen readers announce the file name instead, which is exactly the confusing, meaningless output that empty or descriptive alt text is meant to prevent.
How do you write good alternative text?
Good alt text answers one question: what does this image communicate that a non-visual user would otherwise miss? Everything else follows from that.
Start with function, not appearance
A photo of a product isn't just "a red kettle" — depending on context, the useful detail might be the price tag visible in the shot, the pour spout design being demonstrated, or nothing more than "red electric kettle."
Keep it concise
There's no official character limit, but some screen readers have historically truncated very long announcements. A sentence or two is usually enough; longer detail belongs in nearby text, not the alt attribute.
Match the description to the image's purpose
The same photo of a bridge might need "aerial view of the Golden Gate Bridge at sunset" on a travel blog, but just "Golden Gate Bridge" — or nothing at all — as a small decorative header.
Never leave it generic
"Image123.jpg," "photo," or "graphic" tells a user something is there without telling them what — often worse than no alt text, since it wastes attention on nothing to act on.
What types of images need alternative text?
Not every image needs the same kind of alt text, because not every image serves the same purpose on the page. WCAG groups images into a few functional categories, and each one changes what "good" alt text looks like.
Informative images
Convey specific content — a photo, illustration, or screenshot — that adds meaning beyond decoration. A settings-menu screenshot needs alt text naming the specific menu and setting, not a generic "screenshot of software."
Functional images
Act as a control — a button, link, or icon that triggers an action. Alt text should describe the action or destination, not appearance: "Search," not "magnifying glass."
Decorative images
Add visual style with no informational content. These should get an empty alt="", not descriptive text and not a missing attribute — telling a screen reader to skip it silently.
Complex images
A chart, graph, or diagram usually carries more information than a short alt attribute can hold. Give a brief summary in the alt text, and put the full detail in a data table or nearby paragraph instead.
What are good alternative text examples?
Seeing the same image handled well and poorly makes the difference concrete.
A product photo on an e-commerce page
WEAK — alt="shoe.jpg"
BETTER — alt="Men's brown leather oxford shoes, side view"
The weak version gives a screen reader user nothing but a file name. The better version tells them exactly what they'd see.
An icon-only "close" button on a modal
WEAK — alt="X icon"
BETTER — alt="Close dialog"
The weak version describes the icon's shape. The better version describes what pressing it actually does.
A decorative divider between blog sections
WEAK — alt="green wavy line decorative divider"
BETTER — alt=""
The weak version forces a listen-through of something with no information. The better version lets the screen reader skip it entirely.
A bar chart showing website traffic by month
WEAK — alt="chart"
BETTER — alt="Bar chart: traffic rose steadily from Jan to Jun, peaking in June"
The better version gives the takeaway in the alt text and points to an adjacent data table for the full numbers.
What are common alt text mistakes?
Leaving the alt attribute out entirely
Worse than an empty one, because a missing attribute leaves some screen readers to announce the file name instead of staying silent.
Writing "image of" or "picture of"
The screen reader already announces that the element is an image before reading the alt text, so this repeats information already heard.
Stuffing alt text with keywords for SEO
Fails the screen reader user it's supposed to serve, and search engines have gotten better at recognizing this pattern as manipulation rather than description.
Giving decorative images descriptive alt text
A background texture or ornamental graphic needs alt="" so a screen reader skips past it instead of interrupting the reading flow.
Duplicating a visible caption in the alt attribute
If the caption already states what the image shows, identical alt text makes a screen reader announce the same sentence twice in a row.
Writing alt text so long it buries the point
An image usually needs one clear idea conveyed briefly, not a paragraph — especially since some screen readers may cut off very long announcements.
Alt text vs. image description vs. caption
These three terms get used interchangeably, but each one serves a different reader, lives in a different place on the page, and does a different job.
| Alt text vs. image description vs. caption | Alt Text | Image Description | Caption |
|---|---|---|---|
| Who it's for | Screen reader users, and anyone whose images fail to load | Screen reader users, when an image is too complex for a short alt attribute | Every reader, sighted and non-sighted alike |
| Where it lives | Inside the HTML alt attribute, invisible to sighted users | In the surrounding text, a linked page, or an aria-describedby reference | Visibly displayed on the page, directly under or beside the image |
| What it does | Substitutes for the image itself | Expands on detail the alt attribute is too short to hold | Adds context, credit, or commentary that the image alone doesn't show |
| Length | Usually a sentence or less | As long as the content actually requires | Varies, but typically visible and scannable |
The overlap causes real confusion because a caption is visible to everyone, including screen reader users who reach it as regular text — which sometimes leads people to assume a caption makes alt text unnecessary. It doesn't. A screen reader announces the alt attribute at the image itself and the caption separately as its own piece of text; skipping the alt attribute because a caption exists just means the image itself gets announced with nothing, or with a file name, right up until the reader reaches the caption a moment later.
How does WCAG define alternative text?
WCAG addresses alternative text directly in Success Criterion 1.1.1, Non-text Content, at Level A — the base level of conformance and the one referenced most consistently across accessibility laws and standards. The criterion requires that all non-text content have a text alternative that serves the same purpose, with a short list of specific exceptions: purely decorative content, CAPTCHA (which needs an alternative test method, not alt text), and content where a test would be invalidated by the alt text itself.
WCAG's own language matters here because it doesn't just require "a description" — it requires a text alternative that serves an equivalent purpose. That's a higher bar than a literal visual description. It's the reason "photo of a woman smiling" is often the wrong alt text for a photo whose actual purpose on the page is to show a customer testimonial — the equivalent purpose is conveyed by naming who's speaking and what they said, not by describing the photo.
WCAG is a technical standard, not a law by itself. Whether it's legally required depends on which law or regulation is in play and which jurisdiction applies — some laws reference it directly, others only get connected to it through case law or procurement policy. What's consistent across nearly all of them is that 1.1.1's requirement for text alternatives shows up as a baseline expectation, which is why it's worth treating as a practical requirement even where no single law spells it out by name.
Frequently asked questions
Every image needs an alt attribute. What goes inside it depends on the image: descriptive text for informative or functional images, and an empty value (alt="") for purely decorative ones. Neither case means leaving the attribute out.
Long enough to convey the image's meaning, short enough to stay scannable — usually a sentence or less. If an image needs more explanation than that, put the extra detail in nearby text rather than stretching the alt attribute itself.
It can, since search engines use it to understand image content. But alt text written primarily for keywords instead of accuracy tends to read poorly to both the screen reader users it's meant to serve and the search engines it's meant to influence.
Behavior varies by screen reader, but a missing alt attribute often means the screen reader falls back to reading the file name, or announces the image with no description at all — leaving a non-visual user with no idea what they've encountered.
No. A caption is visible text displayed near an image for every reader. Alt text is invisible to sighted users and exists specifically to substitute for the image for someone who can't see it. An image can have both, and often should.
No — they should include the attribute with an empty value, alt="", rather than omitting it. The empty value is what reliably tells a screen reader to skip the image; a missing attribute doesn't guarantee the same result.
