Alt text examples (and how to write them)
Updated . A 15 minute read.
Scroll sideways to see every column.
| Role | The image | The alt text | Small-business example |
|---|---|---|---|
| Informative | Shows something the text does not say | What it shows that matters here, in a phrase or one sentence | A product photo, the shop front, a finished job |
| Decorative | Adds nothing a listener would miss | Nothing: alt="" | A divider, a mood photo, a picture the caption already describes |
| Functional | Is a link or button, or the only thing inside one | Where it goes or what it does | A logo that links home, a search icon, a cart icon |
| Complex | Holds more than a sentence can carry | A short name, plus the full information as text on the page | A chart, an infographic, a map |
The role comes first and the words second. The same photo of a mug can need a sentence on its product page, nothing in a grid where its name is the link text, and the product name alone when it is the only thing in the link. The role names are W3C's; the alt text check calls the last two “Link or button” and “Chart, graph, map or diagram”.
What alt text is, and what it is for
Alt text is the words in an image's alt attribute. A screen reader speaks them where the picture sits, a browser shows them when the picture fails to load, and search engines read them too. Most site builders call the field "Alt text" or "Alternative text" in the image settings, so you rarely type the HTML yourself.
What WCAG asks: 1.1.1 Non-text Content, Level A
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.
"Equivalent purpose" is the whole test. Alt text is not a caption and not a description for its own sake: it does the job the picture does on that page. That is why the examples below change with the role more than with the picture.
It is also where most sites slip. WebAIM's 2026 scan of the top million home pages found 16.2% of images with no alternative text at all (not counting alt=""), and 45% of those were linked images. Of the images that did have alt, 10.8% had questionable or repetitive text: "image", "graphic", a file name, or the same words as the text beside it. Every weak example on this page is one of those patterns.
How to write alt text: three questions
W3C's images tutorial suggests one habit before any rule: imagine reading the page aloud over the phone to someone who needs to understand it. Whatever you would say when you reach the picture is close to its alt text. Three questions get you there.
1. What is the image for here?
Ask in the order of W3C's alt decision tree. Does it contain text? Is it in a link or button? Does it add meaning the page does not give in words, and is that meaning a chart or map? If none of these, it is decorative and gets alt="". Our guide to decorative images and empty alt covers that branch; this page covers the rest.
2. What does the text around it already say?
Read the product title, caption or link next to the image, then write only what the picture adds. If the heading says "Speckled stoneware mug", the alt does not need the name again; it needs the colour and the glaze a buyer is looking at. If the text already says everything the picture shows, that is your sign it is decorative.
3. How short can it be?
W3C asks for the most concise description possible and moves anything past a short phrase or sentence into a long description on the page. It sets no number. Our alt text check flags anything over 150 characters as house style: 150 is our line, not a WCAG number. Shopify's own help page caps its alt field at 512 characters and recommends 125 or less. Put the most important words first, use normal punctuation so it reads well aloud, and leave out "image of" and "picture of": the screen reader has already said it is an image.
Takeaway
Role first, then what the text beside it leaves out, then cut it to a phrase or one sentence. Keep a word like "drawing" or "photograph" only when the kind of picture matters.
Product, team and shop photos
These are informative images: each shows something the words on the page do not. The alt gives that something, in the words a customer would use, and stops.
A product photo on its own product page
The picture: A sage green mug with a speckled glaze and a thick rounded handle, on a plain white table.
Beside it: The heading "Speckled stoneware mug", the price, and a description that gives the capacity.
Weak
alt="Picture of mug, handmade mug, ceramic mug gift, stoneware mug"
Better
alt="Sage green mug with a speckled glaze and a thick rounded handle"
The weak version opens with "Picture of", which the screen reader has already said, then repeats one word four times for search. The better one gives what a buyer is looking at and the heading does not: the colour, the glaze, the handle. It leaves the name, price and capacity to the text that already carries them.
A gallery of five photos of the same mug needs five different alts, each saying what that view adds: "The same mug from above, showing the unglazed rim", "The mug beside a pint glass for scale". Five copies of the product name tell a listener nothing new.
A team photo on the About page
The picture: Six people in matching work shirts standing in front of two white vans.
Beside it: A paragraph about the family business, and a list of the six staff with their jobs.
Weak
alt="team-photo-final-2.jpg"
Better
alt="The six of us outside the workshop with our two vans"
A file name is how the photo was saved, not what it shows. W3C's own example of a stock family photo gets the alt "We're family-friendly", because the impression is the reason it is there. Your team photo is there to show real people and a real workshop, so say that. The names are already in the list below, so the alt does not repeat them. On a page with no list, "Maria, Dev and our four engineers outside the workshop" would carry the names the list would have.
The shop front on a Contact or Find us page
The picture: A blue shop front with a striped awning and a flat, step-free entrance, between a bakery and a bank.
Beside it: The street address and opening hours.
Weak
alt="storefront"
Better
alt="Blue shop front with a striped awning and a step-free entrance, between a bakery and a bank"
On a page whose job is to help people arrive, the photo's information is how to recognise the door. The colour, the awning and the neighbours help someone with low vision or a companion describing the street; the step-free entrance answers a question a wheelchair user would otherwise have to phone about. At 91 characters it is still one sentence.
A product photo in a store has a second life in the listing grid, where it usually sits inside the link to the product. That changes its role; see a photo inside a link with text below, and our guide to making a Shopify store accessible for where the alt field lives in a store's admin.
Logos and icon buttons
Logos and icons are where alt text most often describes the wrong thing. Once an image is a link or a button, or the only thing inside one, its alt is the control's name. A name says what happens, not what the picture looks like.
A logo alone in a link to the home page
The picture: The Harbor Plumbing wordmark in the top left corner, linked to the home page, with no other text in the link.
Weak
alt="Harbor Plumbing logo"
Better
alt="Harbor Plumbing home"
In a link the alt is the link's name, so it says where the link goes. W3C's own example is "W3C home" for its logo, and its tutorial puts it plainly: "Example.com homepage" rather than "Example.com logo". A listener tabbing through links hears "Harbor Plumbing home, link" and knows what it does.
A logo inside a link that already has text
The picture: A small anchor glyph followed by the words "Harbor Plumbing", both inside one link to the home page.
Beside it: The words "Harbor Plumbing" inside the same link.
Weak
alt="Harbor Plumbing logo"
Better
alt=""
The link's own text already names it, so any alt is read as well: "Harbor Plumbing logo Harbor Plumbing, link". W3C gives the image an empty alt here, because it adds nothing the text does not. This is the one logo case where empty is right.
A logo that is not a link
The picture: The logo of the local chamber of commerce in the footer, beside the words "Proud member since 2019", not linked.
Beside it: "Proud member since 2019".
Weak
alt="logo"
Better
alt="Riverside Chamber of Commerce"
An unlinked logo carries the name written in it, and nothing more. W3C's example for its own unlinked logo is simply the organisation's name, with the note that there is no need to say it is a logo. Without it, the sentence beside it says you are a proud member of something nobody can hear.
Icon buttons
An icon with no visible word beside it is a functional image in its purest form. Every one in this table is the only thing inside its link or button, so the better alt is the action.
| The icon and what it does | Weak | Better |
|---|---|---|
| Magnifying glass that opens search | magnifying glass | Search |
| Three lines that open the menu on a phone | hamburger-icon.svg | Menu |
| Shopping bag with a small 2 drawn on it | cart icon | Cart, 2 items |
| Instagram glyph in the footer, linked to your profile | Instagram icon | Harbor Plumbing on Instagram |
| Printer that prints a quote | printer | Print this quote |
The cart line is the one people miss. If the number of items is only drawn on the icon, a listener hears "Cart" and never learns there is anything in it, so the count goes in the name. And if your menu icon is an inline SVG rather than an image file, the same name goes on the button itself, for example as an aria-label; the words do not change, only where they live.
Takeaway
In a link or button, write the destination or the action. "Logo", "icon", "button" and "click here" never belong in the alt: the screen reader already says link or button. When you pick "Link or button", our alt text check flags an alt that says what an icon looks like instead of what it does, and any "link", "button" or "click here".
Charts, infographics and maps
These are complex images: they hold more than a phrase can. The alt stays short and the real information moves onto the page as text, where everyone can use it.
A bookings chart on a results page
The picture: A bar chart of monthly bookings for one year, rising from spring and peaking in August.
Beside it: A paragraph saying bookings picked up after online scheduling was added.
Weak
alt="Chart"
Better
alt="Bar chart of bookings by month, with the figures in the table below"
A chart holds more than a sentence can, so W3C asks for two parts: a short alt that names the chart and says where the rest is, and the figures themselves as text on the page, here a small table under the chart. The sentence beside it should also state the point the chart makes, such as "bookings doubled between March and August", so nobody has to read the bars to get it.
An infographic of tips
The picture: A tall graphic with ten numbered kitchen safety tips, each with a small drawing.
Beside it: The heading "Ten kitchen safety tips".
Weak
alt="infographic"
Better
alt="Ten kitchen safety tips, written out in full below"
An infographic is mostly text set as a picture, and that text is the content. Ten tips will not fit in an alt, so the alt names it and points to the list, and the ten tips go on the page as a real HTML list. That list also helps sighted readers on a phone, where a tall graphic shrinks to a size few people can read.
A map screenshot on a Find us page
The picture: A street map with a pin on the shop, two blocks north of the train station.
Beside it: The street address, and a line of directions from the station.
Weak
alt="Google Maps screenshot"
Better
alt="Map of the streets around our shop, two blocks north of the station; directions are written beside it"
A map is a complex image too: what it carries is how to get there. The fix is mostly on the page, not in the alt: write the address and plain directions from a landmark next to the map. Then the alt only has to say what the map shows and where its words are. "Google Maps screenshot" names the source, not the place.
The chart's two parts, as the HTML ends up
<figure>
<img src="bookings.png"
alt="Bar chart of bookings by month, with the figures in the table below">
<figcaption>Bookings doubled between March and August.</figcaption>
</figure>
<table>
<caption>Bookings by month</caption>
…
</table>A chart that tells its story only through colour has a second problem, covered in our guide to use of colour: the table under it fixes both.
A photo inside a link with text
Product grids, blog lists and "our services" cards all put a photo next to a title, both leading to the same page. How you build that decides the alt.
Photo and product name in one link
The picture: A product card in a shop grid: the mug photo, and under it "Speckled stoneware mug", all one link.
Beside it: "Speckled stoneware mug" inside the same link.
Weak
alt="Speckled stoneware mug"
Better
alt=""
The link already has a name from its text. An alt that repeats it makes the link read "Speckled stoneware mug Speckled stoneware mug", on every card in the grid. Empty alt keeps the photo as part of the click area and out of the spoken name. The detailed description belongs on the product page, where the photo is informative.
Photo as the only thing in the link
The picture: A row of service photos on the home page, each one a link to its service page, with no text in the link.
Beside it: Nothing inside the link; the service names appear only in the photos' own lettering.
Weak
alt=""
Better
alt="Drain cleaning"
Here the photo is the link's only content, so an empty alt leaves a link with no name. That is the WebAIM finding above: 45% of the images missing alt were linked images. The alt names where the link goes, which here is the service, not the photo of a man with a drain rod.
W3C's technique for this case puts the photo and the text in one link and gives the photo an empty alt. Two separate links to the same page mean two stops for a keyboard user and the same name read twice.
Two images on this page, and why their alt reads as it does
The drawings on this site are not photographs of anything you need to see. Here is what we wrote for the two on this page.
Fig. 1, at the top
alt="Line drawing of three picture cards with blank lines under them, the middle line ringed in orange"
Fig. 2, after the three questions
alt="Line drawing of a picture card of a cup with the line under it ringed in orange"
A fair case could be made for alt="" on both: each has a numbered caption that carries the point, and W3C leaves the call to the author. We describe them because the captions refer to "Fig. 1" and "Fig. 2", and a listener should know what the figure the text points at looks like. Each opens with "Line drawing of" on purpose: W3C advises against generic words like "image", but says the kind of picture can matter. Here it tells a listener they are missing a simple drawing, not a photograph of a real product.
The logo in our menu bar is the other case on every page. The small mark is hidden from screen readers and the link's text reads "Altstamp", which is W3C's logo-inside-link-text pattern: the link already has its name, so the picture adds none.
Try a rewrite
Three of the weak examples above, ready to fix. This runs the same rules as our alt text check, in your browser, as you type.
The picture: Six people in work shirts in front of two white vans. The staff are named in a list below the photo.
25 characters; our house line is 150
What the check finds
- Fix
Starts with "Image of"
Screen readers already announce an image, so the opener is said twice. Keep a word like painting or photograph only when the kind of picture matters.
Better
<img src="…" alt="Our amazing team">
Before you publish: a quick reference
Seven checks for every image
- Every img has an alt attribute, even if it is empty.
- Links and buttons that are only an image say where they go or what they do.
- Product and place photos say what the text beside them does not.
- Charts, infographics and maps have their information on the page as text.
- Words inside a picture are in its alt, or on the page.
- No file names, no "image of", no repeated keywords, no hashtags.
- Decorative images have alt="" with nothing between the quotes.
To hear the result the way a listener does, spend ten minutes with a free screen reader using our screen reader testing guide. Alt text is the first line of the WCAG 2.2 AA checklist (1.1.1, Level A), and the same rules apply to the images in a document; see accessible Word documents.
Social media images and flyers
The same rules follow your pictures off the site. Where a social platform or email tool gives you an alt text or image description field, fill it the same way; the place it hides varies by app, so look in the image's edit options or the app's help page. For newsletters, see our guide to accessible email.
An event flyer posted as an image
The picture: A bright graphic reading "Open day, Saturday 18 April, 10 to 4. Free tool sharpening. Coffee on us."
Weak
alt="Open day flyer"
Better
alt="Open day, Saturday 18 April, 10 to 4. Free tool sharpening. Coffee on us."
When the information is the words in the picture, the alt is those words. "Open day flyer" tells a listener there is an event and hides when it is. Put the same details in the post's text too: people skim captions, and a flyer is hard to read on a phone.
A finished-job photo on a social post
The picture: A small bathroom after a refit: white tiles, a walk-in shower with a low threshold, a grab rail.
Beside it: The post's text: "Another bathroom finished this week in Riverside!"
Weak
alt="#bathroom #renovation #riverside"
Better
alt="Refitted bathroom with white tiles, a walk-in shower with a low threshold and a grab rail"
Hashtags in the alt are search terms, not a description: a listener hears a string of tags and still does not know what the photo shows. The caption says a bathroom was finished; the alt gives what the photo shows that the caption does not, which is the work itself.
Takeaway
Words inside a picture go into its alt, all of them that matter. Better still, put them in the post or on the page as text and let the picture be the picture. Our guide to fonts and text in images covers why real text beats an image of text.