Originally published at A11yFix.
i used to think alt text was simple. describe what you see, move on. then i started testing my sites with VoiceOver and realized most of my alt text was either useless or actively confusing.
the problem isn't laziness. it's that nobody teaches you what good alt text actually sounds like when a screen reader reads it out loud. so here are 15 examples from real audits -- what was there, what should have been there, and why.
the golden rule nobody follows
alt text should communicate what the image means, not what it looks like. sounds obvious until you try it.
product images
bad: alt="shoes"
good: alt="Nike Air Max 90 in white and grey, side view"
bad: alt="product photo"
good: alt="hand-poured soy candle in amber glass jar, 8oz"
screen reader users are shopping. they need to know what they're buying, not that there's a photo on the page.
charts and data
bad: alt="bar chart"
good: alt="monthly revenue chart showing 40% growth from January to March 2026"
bad: alt="graph"
good: alt="comparison chart: automated tools caught 168 issues, manual testing found an additional 147"
this one drives me nuts. "bar chart" tells a blind user there's a chart. so what? what does the chart say? that's the alt text.
screenshots
bad: alt="screenshot of dashboard"
good: alt="analytics dashboard showing 720 page views and 14 reactions across 30 articles"
bad: alt="error message"
good: alt="browser console error: Cannot read property 'click' of null at line 47"
if you took the screenshot to show something specific, that specific thing is your alt text.
decorative images
bad: alt="decorative border" or alt="background pattern"
good: alt=""
empty alt. not missing -- deliberately empty. this tells screen readers to skip it entirely. decorative images with alt text are noise.
the markup: <img src="border.png" alt="" role="presentation">
icons with text
bad: alt="icon" on a search icon next to "Search"
good: alt="" (the text label already communicates the function)
bad: alt="" on a hamburger menu icon with no visible text
good: alt="Menu" or better: use aria-label="Menu" on the button
rule of thumb: if there's visible text next to the icon that says the same thing, the icon alt should be empty. if the icon is the only indicator of function, it needs alt text.
logos
bad: alt="logo"
good: alt="AgentKit" or alt="AgentKit - home"
the alt should be the company name, not the word "logo". when it links to the homepage, include that context.
complex infographics
bad: alt="infographic about accessibility"
good: provide a text alternative nearby, and use alt="Accessibility compliance roadmap, detailed description below"
some images can't be described in a short alt attribute. that's fine. describe what it is briefly in alt, then provide the full content as text on the page.
the context test
here's the trick i use now: cover the image with your hand and read the surrounding text. does the paragraph still make sense? if not, the image is carrying meaning that needs to be in the alt text.
if the paragraph works fine without the image, the image is decorative. alt="".
the 5-second rule
if you can't write the alt text in 5 seconds, the image is probably too complex for a simple alt attribute. use a longer text description nearby instead.
not every image needs alt text. not every alt text needs to be long. but every alt text needs to be useful.
if you want the full checklist with 100+ checks like this, i put one together at blog.a11yfix.dev. also available as a printable pdf on etsy.
if you want a systematic way to check your site's accessibility, grab the free 10-point EAA quick-check at blog.a11yfix.dev.
Top comments (0)