Alt text is the most consistently neglected accessibility requirement on the web, and the reason is that nothing breaks when you skip it. The page looks identical. The only person affected is someone you cannot see, using a screen reader, hearing silence or a filename where a description should be.
Advertisement. We earn a commission if you sign up through this link, at no extra cost to you.
It is also a legal requirement in a growing number of places, and it is how search engines understand what an image contains. Three good reasons, and the work is a sentence per image.
What it is for
The alt attribute provides a text alternative for anyone who cannot see the image. That is a screen reader user, someone on a connection where the image failed, and a search engine.
WCAG 1.1.1 makes it a Level A requirement — the baseline, not the aspiration. In the United States, image accessibility is a recurring subject of ADA litigation. In Europe, the European Accessibility Act has applied since June 2025 to a broad range of consumer-facing digital services, which brought a lot of e-commerce sites into scope that previously treated accessibility as optional.
The distinction that matters technically: every image needs an alt attribute, but not every image needs a description. These are different statements and confusing them produces the two most common mistakes.
Missing versus empty
<img src="decorative-swoosh.png"> <!-- wrong -->
<img src="decorative-swoosh.png" alt=""> <!-- right -->
<img src="team-photo.jpg" alt="The design team at the 2026 studio opening">An image with no alt attribute is undefined. A screen reader has to guess, and typically falls back to announcing the filename — so the visitor hears “D S C underscore zero zero four two dot j p g”, which is worse than nothing.
An image with alt=”” is explicitly marked decorative. Screen readers skip it entirely, which is exactly right for a background flourish, a divider, or an icon sitting next to text that already says the same thing.
So the rule is: alt on everything, empty when the image carries no information a sighted visitor would get.
Writing it well
Describe the function, not the appearance. Ask what the image is doing on the page. A photo illustrating an article about crowded commutes is not “people standing on a train” — it is whatever the article is using it to show.
Skip “image of” and “photo of”. Screen readers already announce that it is an image. Writing it into the alt text means the visitor hears it twice.
Be concise. A sentence, usually. There is no hard character limit in any specification, but alt text is heard rather than skimmed, and a hundred words of description is a worse experience than fifteen.
Context changes the answer. The same photograph of a running shoe needs different alt text on a product page (“Blue mesh running shoe, side view”), in an article about manufacturing (“Machine-stitched seam on a running shoe upper”), and next to a caption already describing it (alt=””, because the caption covers it).
If the image contains text, the alt must contain that text. A banner reading “20% off until Friday” needs that in the alt. This is the most commonly failed case, because the text feels like it is already on the page.
For a linked image, describe the destination. A logo linking to the homepage is alt=”Expert Web Audit home”, not alt=”logo” — what the visitor needs to know is where the link goes.
Charts, diagrams and screenshots
Complex images are where this gets genuinely hard, because a useful description does not fit in an attribute.
The pattern that works: short alt naming what the image is, and the actual information in the surrounding text or a caption.
<figure>
<img src="traffic-chart.png"
alt="Line chart of organic sessions, January to September 2026">
<figcaption>
Organic sessions fell from 4,200 in January to 2,900 in June,
then recovered to 3,800 by September after the site migration.
</figcaption>
</figure>The caption serves everyone. Sighted readers get the summary without squinting at the axis labels, and screen reader users get the same information rather than a description of a picture.
This is worth taking seriously for a specific reason beyond accessibility: a chart’s meaning is invisible to search engines and to AI systems reading your page. Text describing what the chart shows is the only version of that information a machine can use.
For screenshots of an interface, describe what the screenshot demonstrates rather than transcribing the whole screen. “The Rank Math redirections screen with a 301 configured” is more useful than a list of every menu item visible.
Finding the ones you are missing
Screaming Frog — the Images tab lists every image missing alt text across the whole site, with the pages they appear on. This is the fastest way to get the complete list.
WAVE — a browser extension that flags missing and suspicious alt text visually on the page you are looking at. Good for spot checks and for showing someone the problem.
axe DevTools — more thorough, catches related issues like alt text duplicating adjacent caption text.
In WordPress, the media library has an alt text field on every attachment, and images inserted afterward inherit it. Filling it in at upload time is far less work than retrofitting, and it means the description is written by whoever chose the image.
One caution about automation: several plugins now generate alt text with AI. This is useful as a first pass on a large legacy library, and it produces descriptions of what is in the picture rather than what the picture is doing on the page. Treat the output as a draft, especially for images carrying text or a specific message.
What alt text does for search
It is how Google understands an image, and it is the primary signal for Google Images. For an e-commerce site, image search is a real traffic channel, and product photos with empty or generic alt text are invisible in it.
The temptation is to stuff keywords in. Do not. Google has explicitly called keyword-stuffed alt text a spam signal, and beyond that it defeats the purpose — a screen reader user hearing a keyword list learns nothing about the image.
The good news is that these goals do not conflict. An accurate description of a product naturally contains the words someone would search for, because those are the words that describe the product.
Also worth knowing
CSS background images have no alt attribute. If an image carries meaning, it belongs in an img tag. Backgrounds are for decoration only.
Inline SVG uses different mechanics — a title element inside the SVG, or role=”img” with aria-label.
Icon fonts and pseudo-element content are invisible to assistive technology unless labelled. This is why an icon-only button so often announces as “button” and nothing else.
The short version
Every image gets an alt attribute. Decorative images get alt=””, which is not the same as leaving it out. Describe what the image is doing on the page, not what it looks like, and never start with “image of”. If the image contains text, the alt contains that text. Put complex information in a caption where everyone can read it. And write it at upload time — retrofitting three hundred images is the version of this job nobody ever finishes.
Working through this list on your own site and would rather not? That is what an Expert Web Audit is for.
Advertisement. We earn a commission if you sign up through this link, at no extra cost to you.
