How to write alt text that actually helps

Good alt text says what an image means in its context, in as few words as that takes, and nothing more. The rule behind it is WCAG success criterion 1.1.1, Non-text Content, a Level A requirement: every image that carries information needs a text alternative that serves the same purpose (W3C). Learning how to write alt text is mostly learning a handful of decisions. If an image is decorative, give it an empty alt attribute (alt="") so screen readers skip it. If it carries information, describe that information briefly. If it is a link or a button, describe where it goes or what it does, not what it looks like. If it is a chart or a diagram, put the full data on the page and keep the alt short. The W3C's alt decision tree walks through these cases in order, and it is the fastest way to get an image right. This guide works through each case with real examples, then covers the mistakes that turn up most in audits.

What does WCAG actually require for alt text?

WCAG 1.1.1 asks for a text alternative that "serves the equivalent purpose" of the image (W3C). The word doing the work there is purpose. The criterion does not ask you to describe every pixel. It asks you to convey what the image is there to do.

That is why the same photo can need different alt text on two different pages. A photo of a robin on a garden centre's homepage might just be alt="Robin", or even decorative if it is there for mood. The same photo on an ornithology site teaching bird identification might need alt="Adult male European robin, orange breast and grey face, perched on a bare twig". The W3C's images tutorial makes this explicit: the text alternative depends on the usage, context, and content of the image, and the author is the one who has to judge it (W3C). No tool can make that judgement for you, because no tool knows why you put the image there.

1.1.1 is a Level A criterion, the floor. It is also the single most common issue in automated scans, because a missing alt attribute is trivial for a machine to spot. That makes it a good place to start, and a bad place to stop.

How do I decide what alt text to write?

Run the image through the W3C alt decision tree. It sorts every image into one of a few types, and each type has a different answer. Here is the short version:

Two more cases sit at the edges. A group of images that together make one point gets a single alt on one image and empty alt on the rest. An image map, where different regions link somewhere different, needs alt on each active region. Most images you write are informative, decorative, or functional, so those three are worth getting fluent with.

When should alt text be empty?

When the image adds no information a screen reader user would miss. The W3C's rule is direct: provide a null text alternative, alt="", when the only purpose of an image is visual decoration rather than to convey information (W3C).

Empty alt is not the same as a missing alt. This matters more than it sounds. <img src="divider.png" alt=""> tells a screen reader "skip this, nothing to announce." <img src="divider.png"> with no alt at all leaves the screen reader to guess, and many will read the file name out loud, so the user hears "divider dot png." One is silence; the other is noise. Always write the attribute, even when its value is empty.

Things that usually take empty alt: background flourishes, decorative dividers, a stock photo that only sets a mood, an icon sitting next to a text label that already says the same word. If the label next to a printer icon already reads "Print," the icon is decorative and gets alt="", because announcing "Print, Print" helps no one.

How do I write alt text for links and buttons?

Describe the function, not the image. The W3C is specific here: the text alternative of an image used as a link or a button should describe the functionality, not the picture (W3C).

A logo that links to the homepage is the classic example. Write alt="Acme home", not alt="Acme logo". The user does not need to know it is a logo; they need to know the link goes home. A magnifying-glass icon that submits a search is alt="Search", not alt="Magnifying glass". A bare "×" that closes a dialog is alt="Close".

The test I use: read only the alt text aloud and ask whether someone would know what the control does. "Magnifying glass" fails that test. "Search" passes it. If a button has both an icon and visible text, the icon is decorative, and the visible text is the accessible name, so the icon image gets alt="".

What about images of text, charts, and diagrams?

For an image of text, the alt text is the text. If a banner image reads "Summer sale, 20% off," the alt is alt="Summer sale, 20% off". Better still, avoid images of text where you can. WCAG has a separate criterion, 1.4.5, that pushes you toward real text because real text scales and reflows for people who resize it, and an image never will.

For a chart, graph, or diagram, one line of alt cannot carry a data table. The W3C guidance is to provide a complete text equivalent of the information, and the practical pattern is a short alt plus the detail nearby (W3C). A revenue chart might use alt="Bar chart of monthly revenue, described below" with the actual figures in a real HTML table or a paragraph under the image. That table helps sighted users too, which is usually the sign of a good accessibility fix.

What are the most common alt text mistakes?

A handful of errors show up in almost every audit:

• Starting with "image of" or "picture of." Screen readers already announce the element as a graphic, so alt="image of a dog" is read as "graphic, image of a dog" (WebAIM). Just write alt="A beagle asleep on a sofa". The exception is when the medium matters, like alt="1920s photograph of State Street, Chicago".
• Using the file name. alt="IMG_4021.jpg" or alt="hero-final-v2" is worse than useless. It usually means alt was auto-filled and never reviewed.
• Missing the attribute entirely on an informative image, which fails 1.1.1 outright and often makes the screen reader read the file name.
• Repeating the caption. If a visible caption already describes the image, a duplicate alt makes the user hear it twice. Consider alt="" and let the caption do the work.
• Keyword stuffing. Alt text is not a place to hide search terms. It is read aloud to a person, and padding it wastes their time.

My rule of thumb: if you cannot say the alt text out loud and have a colleague understand the image's point without seeing it, the alt text is not finished. Read it, do not just type it.

Can a scanner or AI write alt text for me?

It can give you a draft, not an answer. A vision model can look at a photo and tell you there is a dog on a sofa. It cannot know that the photo sits on your checkout page to show the size of a pet bed, which is the fact your alt text actually needs to carry. Context is the whole job, and context is exactly what an automated tool does not have.

Automated tools are honest about a narrower thing: whether an alt attribute exists at all. That check is worth running, because missing alt is common and easy to fix in bulk. But "has an alt attribute" and "has good alt text" are different questions, and a scanner can only answer the first. Across more than 2,000 audits, Deque found automation caught about 57% of accessibility issues by volume, with other estimates closer to 30% when measured by the share of success criteria a scanner can even evaluate (Deque). Alt text quality lands squarely in the half a machine cannot judge.

This is also where overlay widgets and "AI alt text" tools oversell. Claiming a tool makes your images accessible on its own is the kind of promise that cost the overlay vendor accessiBe a $1 million order from the US Federal Trade Commission for misrepresenting what its product could do (FTC). Use automation to find images that lack alt text; write the alt text yourself. On the standards side, WCAG 1.1.1 is incorporated into EN 301 549, the European standard behind the EAA, so getting alt text right is part of the legal bar too, not just good manners.

Frequently asked questions

What is alt text in one sentence?

Alt text is a short written description of an image, set with the HTML alt attribute, that screen readers announce and browsers show when the image fails to load. It exists so people who cannot see the image still get its meaning.

How long should alt text be?

Long enough to convey the image's point and no longer. There is no hard character limit in WCAG. A sentence or two is typical for an informative image; a decorative image gets alt=""; a chart gets a short alt plus the full data elsewhere on the page.

Should I start alt text with "image of"?

No. Screen readers already announce that the element is a graphic, so "image of" is repeated back to the user (WebAIM). Describe the content directly. Only mention the medium when it matters, like a painting or a historic photograph.

What is the difference between empty alt and no alt?

alt="" tells assistive technology to ignore the image, which is correct for decoration. A missing alt attribute leaves the image undescribed, so many screen readers fall back to reading the file name. Always include the attribute, empty or not.

Is alt text required for WCAG compliance?

Yes. WCAG success criterion 1.1.1, Non-text Content, is Level A, the minimum conformance level, and it requires a text alternative for all informative non-text content (W3C).

Find the images missing alt text on your site

The fastest way to start is to see which images on your pages have no alt attribute at all, then write real descriptions for the ones that carry meaning. Run a free scan to surface the machine-detectable gaps, including missing alt, across your key pages, and work through our WCAG checklist for the manual judgement calls a scanner cannot make. Automation finds the images; you write the words.

Pavel Charkasau, founder, wcagc.com. Last updated 14 July 2026.

Sources

• Understanding SC 1.1.1: Non-text Content, W3C WAI — the Level A requirement for text alternatives and its exceptions. Accessed 14 July 2026.
• An alt Decision Tree, W3C WAI Images Tutorial — the step-by-step method for choosing alt text by image type. Accessed 14 July 2026.
• Images Tutorial (concepts), W3C WAI — informative, decorative, functional, and complex images, and context-dependent alt. Accessed 14 July 2026.
• Alternative Text, WebAIM — practical guidance on phrasing, including avoiding "image of." Accessed 14 July 2026.
• Automated testing identifies 57% of accessibility issues, Deque — automated coverage figures. Accessed 14 July 2026.
• FTC approves final order requiring accessiBe to pay $1 million, Federal Trade Commission — deceptive accessibility-compliance claims. Accessed 14 July 2026.