Writing image alt text that serves both search and screen readers
· 6 min read
Image alt text done right: the W3C decision tree, weak-versus-strong rewrites, honest SEO value, the 53.1% failure rate, and a testing workflow.
- Alt text serves three audiences: screen reader users, broken-image fallbacks, and crawlers
- Describe the image's purpose in context, not its literal inventory of pixels
- Decorative images want an empty alt attribute, not a missing one
- The 2026 WebAIM Million found missing alt text on 53.1% of home pages
For attribute-level specifics, MDN's alt documentation pairs well with WAI's guidance on complex images such as charts and diagrams.
What alt text actually does
The alt attribute on an image element carries a text replacement for situations where the image cannot be seen. Screen readers speak it to blind and low-vision users. Browsers display it when a file fails to load. Search engines read it while deciding what an image shows, since Google's image publishing guidance names alt text as a primary relevance signal for image results. Accessibility standards make the attribute mandatory for non-decorative images under the WCAG non-text content criterion, which is why audits flag every miss. One short string, three consumers with slightly different needs, and writing well means serving all three without awkward compromise.
The alt attribute definition in the WHATWG HTML specification frames it as the fallback content of the image. That framing prevents most mistakes: you are not captioning a picture for everyone, you are replacing it for someone who cannot use it.
The decision tree that settles most cases
The W3C's alt decision tree asks one question at a time and covers essentially every image on the web:
| Image role | Correct treatment |
|---|---|
| Informative: conveys information the page depends on | Short text conveying the same information |
| Functional: is a link or button | Describe the destination or action, never the picture |
| Decorative: purely visual flavor | Empty alt attribute: alt="" |
| Complex: chart, diagram, map | Concise alt plus adjacent long description |
| Text inside the image | Alt repeats the same text verbatim |
Two rows cause the most confusion. Functional images want the action named: a shopping-cart icon linking to checkout gets alt like Checkout, not red cart icon. And decorative images want the attribute present but empty; omitting the attribute entirely makes screen readers announce the filename, which is noise nobody wants.
Writing it: weak versus strong
| Weak | Strong | Why |
|---|---|---|
image of a dog | Golden retriever catching a frisbee mid-air | Specific beats generic; image of wastes characters |
chart.png | Sales rose 18% each quarter of 2026 | Filenames help nobody; the takeaway does |
SEO graphic keywords ranking | Bar chart of the five ranking factors discussed below | Keyword stuffing reads as spam to users and crawlers alike |
click here button | Download the 2026 pricing PDF | Functional images name the action |
The decision tree tutorial pairs each rule with worked examples worth bookmarking. The pattern across all four rewrites: state what the reader should learn or do, in the sentence you would say aloud if the picture vanished. Aim for a phrase to one sentence; the convention caps useful alt text well under 125 characters not because tools break past it, but because longer descriptions belong in surrounding text or an aria-describedby companion.
The SEO value, stated honestly
Alt text influences two measurable surfaces. Image search: Google matches queries against alt text alongside filenames, surrounding copy, and structured data, so descriptive alt text is how images from a page surface for relevant queries. Page-level understanding: alt text adds context crawlers parse, which helps marginally, as any well-structured HTML does. How long any of that takes to register is a separate question, and how long Google takes to index a page is worth calibrating against before you read anything into early results.
What alt text does not do: act as a keyword-stuffing slot. Repeating a target phrase across dozens of alts reads as manipulation, and screen reader users bear the worst of it. The honest framing is that accessibility and SEO point the same direction here; WebAIM's alt text techniques guide summarizes the practice as writing for people, which search engines reward because their goal aligns.
The industry's failure rate makes the bar low. In the same annual million-home-page survey, 53.1% lacked alt text on some images, the second most common accessibility failure detected. Writing competent alt text on every meaningful image puts a page ahead of most of the web.
Testing your alt text
- Unplug the visuals: read your page with images hidden; every meaningful image should leave the text coherent
- Listen once: a free screen reader pass (Narrator, VoiceOver, or NVDA) reveals announced filenames instantly
- Inspect programmatically: the image metadata viewer helps audit what files actually contain when you are checking uploads
- Fix delivery while you are there: our image compression guide covers the performance half of image hygiene
Markup context matters as much as wording, so here is the complete pattern for a meaningful image:
<img src="golden-retriever-frisbee.webp" alt="Golden retriever catching a frisbee mid-air" width="800" height="533">
The explicit dimensions prevent layout shift, and the alt reads as a sentence rather than a filename. Two boundary cases deserve mention. CSS background images carry no alt attribute at all, so anything informative must live in actual text, not decoration. Inline SVG uses its own accessibility machinery: a <title> child element plus role="img" plays the role alt plays for raster images.
Generation tools can draft this attribute at scale, and our AI alt text generator produces solid first passes from the image alone. Treat every generated string as a draft for human review though, because a model cannot know which detail the surrounding page depends on.
Alt text in real workflows
CMS platforms make alt text easy to skip because the field sits inside an upload dialog nobody reads. Two habits close the gap: write alt text at upload time as part of the publishing checklist rather than as a later audit, and treat empty alt as a deliberate decision recorded in code review for template images. Teams that generate pages programmatically should generate alt text programmatically too, from data the template already holds, because hand-written alts rot exactly like any other copy.
For the broader toolchain around images on the web, our complete image tools guide maps converters, compressors, and format decisions into one workflow.
Write for the reader who cannot see
Image alt text rewards a single discipline: replace the image with the sentence its absence demands. Screen reader users get a coherent page, broken connections get graceful fallbacks, and image search gets accurate signals, all from the same honest sentence. Audit one template this week, fix the filenames masquerading as descriptions, and let the empty alt attribute carry the decorative weight in silence.
Written by
Farah Nasser
Automated checks find perhaps a third of real problems; the rest need a human reading the page. It is a ratio of relative luminance with a threshold that depends on rendered size and weight, so a large heading and a body sentence can use different thresholds for the same pair of colours. What a tool cannot tell you is what the text sits on, so a ratio computed against white is meaningless on a dark background or over a photograph. Alt text is the area where advice conflicts most. An informative image needs a description. A decorative one needs an empty alt attribute so a screen reader skips it, and omitting the attribute does not achieve that. A link whose text already says where it goes should not have its destination repeated in the alt text, because a screen reader reads both and the listener hears it twice. ARIA is the largest source of harm. It changes what assistive technology announces, it is frequently applied without need to something already announced sensibly, and a wrong role is worse than no role because it replaces correct behaviour with incorrect behaviour. The first rule of ARIA is not to use it where a native element exists. Keyboard operability is the check I would keep if I could keep only one. If a control cannot be reached or operated by keyboard, it does not exist for a large number of users. Focus order is the other check that costs nothing: tab through the page and confirm the order matches the visual order, which it often does not once something has been positioned absolutely.