Alt text examples: worked lines for fourteen kinds of image, and the four cases where the answer is an empty alt

Alt text is the sentence that describes an image to somebody who cannot see it, and the only reliable way to get it right is to look at worked examples rather than at rules. The pattern behind every example below is the same: say what the image shows, in the context of this page, in about five to fifteen words, with no "image of" at the front and no list of keywords anywhere. The second thing most people get wrong is the opposite case. Some images should carry an empty alt attribute rather than a description, because describing them makes a page worse to listen to. Below are worked lines for fourteen kinds of image a business website actually contains, the cases where empty is the right answer, and the six mistakes that show up in nearly every audit.

This page is the examples. For the rest of the image work, which is file names, formats, compression, responsive markup and image sitemaps, see optimizing images for SEO.

The one rule all the examples follow

Describe the function the image performs on this page, not the contents of the file. The same photograph of a dining table needs different alt text on a product page, on a case study and in a blog post about small rooms, because it is doing a different job each time.

• No "image of" or "picture of". A screen reader already announces that it is an image. Those three words are read out on every single one.
• Five to fifteen words is the normal range. Long enough to be specific, short enough to listen to.
• End it with a full stop. That makes the screen reader pause instead of running into the next element.
• One accurate phrase, never a keyword list. If the keyword is genuinely what the picture shows, it will be in there anyway.
• If the image is a link, describe where the link goes, not what the picture looks like.

Fourteen worked examples

Kind of image	Weak	Better
Product photo, plain background	alt="shoes"	alt="Brown leather Chelsea boot, side view."
Product variant in a colour swatch set	alt="product image 3"	alt="Chelsea boot in oxblood." The variant is the whole point, so it belongs in the text
Product in use, lifestyle shot	alt="lifestyle"	alt="Chelsea boots worn with rolled jeans on a wet pavement."
Team headshot	alt="team member"	alt="Priya Shah, head of operations."
Logo in the site header, linking home	alt="logo"	alt="Northfield Joinery, home." It is a link, so the destination is the description
Client logo in a trust strip	alt="client"	alt="Riverside Hotels." Just the company name, because that is the information
Icon next to a text label that already says the same thing	alt="phone icon"	alt="" The label beside it already says Call us, so describing the icon says it twice
Decorative background texture or divider	alt="abstract pattern blue gradient design"	alt="" Nothing is lost by skipping it
Hero photo with the headline overlaid in the image	alt="hero banner"	alt="Spring sale, 20 per cent off all garden furniture." Any text inside an image has to be repeated in the alt
Chart or graph	alt="chart"	alt="Monthly enquiries rising from 40 in January to 110 in June." Then put the figures in a table or a sentence nearby
Infographic with a lot of content	alt="infographic about recycling"	alt="How a plastic bottle is recycled, in six stages." The six stages then appear as text under it
Software screenshot	alt="dashboard screenshot"	alt="Reporting dashboard showing a weekly enquiry count and source breakdown."
Before and after pair	alt="before" and alt="after"	alt="Kitchen before refitting, original 1980s units." and alt="The same kitchen after refitting, with pale birch units."
Map image showing where you are	alt="map"	alt="Map showing the workshop on Mill Lane, two streets from the station."

When the right answer is an empty alt attribute

An empty alt, written as alt="", tells assistive technology to skip the image entirely. That is a deliberate instruction and it is correct in four situations.

• Purely decorative images. Textures, dividers, background shapes, stock photography that illustrates nothing specific.
• An icon paired with its own text label. Describing it duplicates the label.
• An image whose caption directly beneath it already says the same thing. Describe it once, in the caption, where everybody benefits.
• Images loaded by CSS as a background. There is no alt attribute to write, which is itself a reason to use CSS for decoration and the img element for content.

Empty is not the same as missing. A missing attribute leaves assistive technology guessing, and some screen readers fall back to reading out the file name, which is how a visitor ends up hearing "I M G underscore four four seven one dot jpeg". The accessibility requirement behind all of this is the non-text content criterion in the Web Content Accessibility Guidelines, which asks for a text alternative serving an equivalent purpose, and an intentional empty alt satisfies it for decoration.

Charts, infographics and anything that needs a paragraph

When the honest description runs longer than a sentence, split the job. Write a short alt that states what the image is and what it shows overall, then put the detail in the page itself as text: a table of the figures, a list of the stages, the caption expanded into a sentence or two.

This is the one piece of alt text work with a double payoff. The data in text is readable by a visitor using a screen reader, by somebody on a slow connection where the image never arrives, and by any automated reader of the page. An infographic with no text equivalent is content that only exists for people who can see it.

Six mistakes, and the fix for each

• No alt attribute at all. The most common finding in any crawl. Fix the template first, because one template usually explains hundreds of pages.
• The file name as the alt text. Several content systems do this automatically on upload. Check what yours does with a fresh image before you blame the writers.
• A keyword list. It reads as nonsense out loud, and it is the one version of this that can actively work against you.
• The same alt on every image in a set. Forty product photographs all reading "blue sofa" tells a reader nothing about which is which. Describe the angle, the detail or the variant.
• A linked image described as a picture. If the image is the only thing inside the link, the alt text is the link text. Describe the destination.
• Text left inside an image and nowhere else. Prices, opening hours and offers inside a graphic are invisible to anything that reads text. Repeat them in the alt and, better, put them on the page.

Auditing a library you have already published

• Crawl the site with any crawler that exports an image report, and pull three lists: images with no alt attribute, images whose alt is over about 125 characters, and alt values that repeat across many URLs.
• Fix in template order. Header logo, navigation icons, product gallery, blog featured image. Each fix lands on every page at once.
• Then fix by traffic. Your twenty most visited pages, by hand, properly.
• Then leave the rest to the writing process. Add the field to your publishing checklist so the backlog stops growing. The same checklist should cover the file name, which has its own pattern in naming photos for SEO.
• Check the content system's behaviour once. In WordPress the alt text field sits in the media library and is reused wherever the image is inserted, which means fixing it once can fix it everywhere, or spread one bad description across forty posts. On Shopify it is edited per image in the product gallery. Know which one you are dealing with before you start.

For the other text fields on the same page, worked the same way, see description examples, before and after.

Alt text: the questions that come up

How long should alt text be?

Five to fifteen words covers nearly every image, and about 125 characters is the practical ceiling, because some older screen readers truncate around there. If you need more than that, the image needs a text equivalent on the page instead.

Does alt text help with search?

Yes, in two specific ways. It is the main thing that tells an image search engine what a picture shows, which is how images get found and ranked in image results. And it is read as part of the page's text content, so it contributes a little to what the page is understood to be about. Neither effect is large enough to justify stuffing it, and the accessibility reason is the stronger one anyway.

Should the keyword go in the alt text?

Only when the keyword describes the picture. On a page about oak dining tables, a photograph of an oak dining table will contain the words naturally. A photograph of your delivery van will not, and forcing it in there is the mistake.

Do I need alt text on every single image?

Every image needs an alt attribute. Not every image needs words in it. Content images get a description, decorative images get an empty alt, and that distinction is the whole decision.

Is generated alt text good enough?

As a first pass on a large backlog, yes, and it is far better than nothing. Generated descriptions are literal: they say what is in the frame rather than why the image is on the page, and they do not know your product names. Treat the output as a draft, fix the top pages by hand, and never let it write alt text for charts, which need your numbers.

What about alt text on social media?

The main networks all provide an alt text field on uploaded images, and the same rules apply. It is also the only place a description of that image exists, because the post text is separate from the picture.

The description is the only version a machine gets

There is a second reader for all of this, and it does not see pictures at all. When an assistant reads your page to answer somebody's question, the image is a blank: what it gets is the alt text, the caption and the words nearest the image. So a product gallery with forty photographs and forty empty descriptions tells it nothing about the product, while one accurate line per image tells it the colour, the angle, the material and the use. That is the same sentence you wrote for a screen reader, doing a second job. If you want to see what a machine currently believes your most important page is about, ask one, and compare the answer with what the page shows. AI Knows Us runs that question across the main assistants and reports what they name and which sources they used.