Writing accessible image alternatives is a genuine skill involving three distinct decisions: what to say, when to say nothing at all, and how to handle images too complex for a single sentence.
1Alt Text Describes Purpose, Not Pixels
The most common alt-text mistake is exhaustively describing what an image literally contains rather than why it's there. 'Image of a person' tells a screen reader user nothing useful; 'CEO Maria Chen speaking at the 2024 product launch' tells them exactly what they'd understand from a glance.
The right question to ask before writing alt text is: what information would a sighted user get from this image that a blind user would otherwise miss entirely? Answer that specific gap, in roughly the length a sighted person would spend looking at it — rarely more than one or two sentences.
2Empty alt="" For Purely Decorative Images
Not every image conveys information. Background textures, spacer graphics, and repeated icons that sit next to identical adjacent text add nothing a screen reader user needs to hear. For these, alt="" — present, but deliberately empty — instructs assistive technology to skip the image silently and move on.
This is meaningfully different from omitting the alt attribute entirely, which many screen readers treat as a signal to fall back to announcing the image's filename (something like 'IMG dash 4471 dot JPEG'), an unhelpful and often confusing noise burst for the user.
3Charts, Infographics, And Complex Visuals
A single alt attribute genuinely cannot capture everything in a five-year quarterly revenue chart or a multi-step infographic — and trying to cram it all in produces an unreadably long block that most screen readers announce as one uninterruptible chunk, with no way to skip around or re-read a section.
The accepted pattern separates two jobs: a concise alt attribute conveys the image's takeaway or conclusion ('Revenue grew 40% year over year'), while the full underlying data lives nearby as genuinely accessible markup — an HTML table for chart data, or a full paragraph for an infographic's content — which itself supports normal navigation.
4Step-by-Step Breakdown
Alt Text Is A Skill, Not A Formality. Nearly every developer knows images need an alt attribute. Far fewer know that writing good alt text is a genuine skill, that empty alt="" is sometimes the *correct* choice, or how to handle images too complex for a single sentence to describe.
Alt Text Describes Purpose, Not Just Appearance. Good alt text answers 'why is this image here?' rather than exhaustively describing pixels. A photo of a smiling employee used as a decorative team-page portrait needs different alt text than the same photo used to illustrate 'proper safety gear' in a training manual.
Writing Effective Alt Text. The same photo of a red bicycle appears on a product page and in a blog post about a charity ride. Should the alt text be identical?
- →Yes, always keep alt text identical regardless of context
- →No, alt text should reflect each image's specific purpose in context
- →Both should use alt="" since it's just a bicycle
Empty alt="" Is Correct For Purely Decorative Images. A background flourish, a repeated bullet-point icon, or an image that duplicates adjacent text should use alt="" — an empty but present attribute — which tells screen readers to skip it silently. Omitting the attribute entirely is worse: some screen readers then announce the raw filename instead.
Decorative Images. An image is purely decorative and conveys no information a screen reader user needs. What's the correct alt attribute?
- →Omit the alt attribute entirely
- →alt="" — present but empty
- →alt="decorative image"
Complex Images Need A Text Alternative Beyond alt. A single alt attribute can't adequately describe a complex chart, infographic, or diagram. The accepted pattern pairs concise alt text summarizing the image's conclusion with a full text equivalent nearby — a data table, a longer paragraph, or a linked long-description page.
Complex Images. A bar chart shows quarterly revenue across five years. What's the best accessible approach?
- →Cram the entire dataset into one extremely long alt attribute
- →Write a concise summary alt, and provide the full data in a nearby table
- →Use alt="" since charts are essentially decorative
Alt Text Fluency. You can now write purpose-driven alt text, correctly use an empty alt="" for decorative images, and provide adequate text alternatives for charts and infographics that a single attribute can't fully describe.
Give The Image Real Alt Text. An <img> without meaningful alt text is invisible information to screen reader users.
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Alt Text Should Convey The Same Takeaway A Sighted User Gets At A Glance
This reframes alt-text writing from 'describe the pixels' to 'convey the purpose', producing shorter, more useful descriptions than exhaustive visual inventories.
2An Empty alt Attribute Is A Deliberate, Correct Choice — Not A Mistake
For purely decorative images, alt="" actively improves the experience by removing meaningless content from the screen reader's output, unlike an omitted attribute which often triggers filename announcement.
SEO Implications
- 1
Descriptive Alt Text Is A Direct, Long-Standing Image-Search Ranking Signal
Search engines have used alt text to understand and index image content since the earliest days of image search, making good alt text one of the rare fixes that helps both accessibility and SEO identically.
- 2
Keyword-Stuffed Alt Text Is Penalized, Not Rewarded
Alt text written for search engines rather than users ('chair furniture wood dining chair buy chair') both fails accessibility and is treated as a spam signal by modern search algorithms.
Best Practices
Ask 'What Would A Sighted User Take Away From This?' Before Writing Alt Text
It reliably produces concise, purpose-driven descriptions instead of either overly sparse ('image') or overly exhaustive pixel-by-pixel descriptions.
Pair Concise Alt Text With A Full Data Table For Any Chart Or Graph
It respects the limits of a single alt attribute while still giving users full access to the underlying data through genuinely navigable markup.
Frequent Bugs
A screen reader announces a long string of random characters and numbers when reaching a decorative image.
The alt attribute is missing entirely, causing a fallback to filename announcement. Add alt="" to explicitly mark it as decorative.
A financial report's chart images are effectively meaningless to screen reader users.
The alt text only says 'chart' or is missing. Add a concise, conclusion-focused alt plus a full data table nearby with the underlying figures.
Real-World Examples
Product Photo With Purpose-Driven Alt
An e-commerce listing where alt text serves the buying decision rather than describing the photo generically.
<img src="chair-01.jpg" alt="Oak dining chair with walnut finish, front three-quarter view">