These alt text examples put a weak description next to a better one for the image types you meet most often, with a short reason for each change. Read them as patterns, not scripts: the right words always depend on what the image is doing on that particular page.
Every example is written for the context stated in the first column. If your page is different, the best alt text may be too. In the tables, alt text is shown in quotation marks, and "empty" means alt="" with nothing between the quotes.
Quick facts
Image types covered
Products, people, events, charts, infographics, logos, icons, linked images, screenshots, text, decorationTypical length
Most better versions are under 100 charactersNever start with
"Image of", "picture of" or "photo of"Links and buttons
Describe the destination or actionDecorative images
Empty alt, so screen readers skip them
How to use these alt text examples
Each table follows the same layout: the image and its page, a weak version you often see in audits, a better version, and why. The weak versions fall into a few families: too vague ("photo"), a file name, describing the look of a button instead of its job, padding with "image of", or describing decoration.
The method behind these pairs lives in our alt text writing guide, and newcomers should begin at the alt text basics. The image roles used here follow the W3C images tutorial. To draft your own from a few answers, try the alt text generator.
Product photo examples
| Image and where it appears | Weak alt | Better alt | Why it is better |
|---|---|---|---|
| Main photo of a cotton kurta on a clothing store product page | "Kurta" | "Indigo cotton kurta with white block print and a mandarin collar" | Shoppers need color, pattern and cut, the things they would see |
| Second gallery photo showing the back of the same kurta | "Kurta 2" | "Back view, with a plain yoke and side slits" | Adds only what is new in this view; no need to repeat the color |
| Close up of a laptop's ports on a review page | "image of laptop ports" | "Left side ports: two USB C, one HDMI and a headphone jack" | The review is about connectivity, so the ports are the content |
| Thumbnail of headphones in a category grid, linked to the product page | "headphones.jpg" | "Wireless over ear headphones, sand color" | It is a link, so it carries the product name the link leads to |
People, team and event photo examples
| Image and where it appears | Weak alt | Better alt | Why it is better |
|---|---|---|---|
| Staff group photo for an About us section that does not name anyone | "Our team" | "Eight members of the support team standing on the office steps" | Says who and where without inventing names the page does not give |
| Event photo in a news post about a city tree planting drive | "Event photo" | "Volunteers in green caps planting saplings along a roadside" | Shows the action the article is about |
| Speaker on stage in a conference recap | "Man talking" | "Keynote speaker at a podium in front of a slide titled Open Data" | Captures the role and the visible topic; avoids guessing age or mood |
| Smiling customer in a testimonial block, next to her quote and name | "Happy customer smiling at camera" | Empty | The visible quote and name already carry the meaning; the photo is decoration here |
Stick to what the camera shows and what the page needs. Do not guess a person's ethnicity, disability, age or gender identity, and name people only when the page itself names them.
Charts, graphs and infographics
| Image and where it appears | Weak alt | Better alt | Why it is better |
|---|---|---|---|
| Line chart of website visits over six months in a report | "Chart" | "Line chart: monthly visits climb from about 8,000 to 21,000 over six months" | Gives the point of the chart; full numbers go in a table below it |
| Pie chart of survey answers in a blog post | "Pie chart in blue, orange and grey" | "Pie chart: 62 percent prefer email updates, 25 percent text messages, 13 percent no updates" | Three slices are short enough to state in full |
| Tall infographic of ten tips for safe online banking | A 900 character alt listing every tip | "Infographic: ten tips for safe online banking, listed in full below" | Long content belongs in real text on the page, where it can be read and searched |
| Simple process diagram in a help article | "Diagram" | "Order flow: cart, address, payment, confirmation" | Short sequences can live in the alt itself |
For complex graphics, the alt gives the headline and the page gives the detail, for example a data table under the chart or a text version of the infographic directly after it.
Logos, icon buttons and linked images
| Image and where it appears | Weak alt | Better alt | Why it is better |
|---|---|---|---|
| Company logo in the header linking to the home page | "logo" | "Lotus Travel home page" | A linked image needs the destination; the word logo adds nothing |
| Partner logo in a row of sponsors, not linked | "sponsor-logo-03" | "Greenleaf Foundation" | The organisation's name is the information |
| Printer icon button on an invoice page | "Printer icon" | "Print invoice" | Users need the action, not the drawing |
| X icon that closes a pop up | "x" | "Close" | Says what pressing it does |
| Download arrow linking to a PDF menu | "arrow" | "Download the dinner menu (PDF)" | Names the destination and warns about the file type |
| Icon next to the text link "Contact us", inside the same link | "Envelope icon" | Empty | The link text already says it; describing the icon makes the link read twice |
Screenshots and images of text
| Image and where it appears | Weak alt | Better alt | Why it is better |
|---|---|---|---|
| Screenshot of a settings screen in a how to guide | "Screenshot" | "Notification settings with the Email digest switch turned on" | Describes the part of the screen the step is about |
| Screenshot of an error dialog in a support article | "Error" | "Error dialog: Payment failed. Your card was declined." | Repeats the exact message, which people often search for |
| Promo banner reading "Free delivery this weekend" | "Banner" | "Free delivery this weekend" | An image of text gets the same words, nothing more |
| Scanned notice in a news story | "Notice" | "Notice from the housing society: water supply off on Saturday, 10 am to 2 pm" | Carries the content; if it is long, put the full text on the page |
| Quote card shared from a blog | "Quote" | "Quote: Small habits beat big plans." | Gives the words the card shows |
Better still, avoid images of text. Real text resizes, translates and reflows, which WCAG asks for under its images of text rule.
Decorative image examples
| Image and where it appears | Weak alt | Better alt | Why it is better |
|---|---|---|---|
| Wavy divider line between sections | "divider" | Empty | A screen reader would say "divider" for no benefit |
| Stock photo of a laptop at the top of a generic blog post | "Laptop on desk with coffee" | Empty, or a short description if it relates to the topic | If it only sets a mood, it is decoration |
| Background pattern behind a heading | "pattern" | Empty (better as a CSS background) | Purely visual |
| Icon next to a heading that already says "Delivery" | "truck" | Empty | The heading carries the meaning |
Same image, different alt text
Context changes everything. Here is one photo of a golden retriever catching a frisbee in a park, used on four pages:
| Page | Alt text |
|---|---|
| Dog breed guide | "Golden retriever with a thick wavy golden coat, mid jump" |
| Pet toy store, frisbee product page | "Golden retriever catching the red soft frisbee in mid air" |
| City parks page about off leash areas | "Dog playing fetch in the open off leash zone of a park" |
| Blog post where the photo is only a mood header | Empty |
Broken image alt text example in HTML
When a picture fails to load, browsers show the alt text in its place, usually with a small broken image icon. That is the easiest way to see why alt text matters to everyone.
Weak: if the file is missing, the visitor sees only "IMG_0912".
<img src="/photos/IMG_0912.jpg" alt="IMG_0912">Better: the visitor still learns what the image showed.
<img src="/photos/clinic-entrance.jpg" alt="Clinic entrance with a ramp beside the steps">You can test it yourself by temporarily changing the src to a file name that does not exist. To find weak alt text across a whole page, use the alt text checker.
Questions people ask
What is a good alt text example?
For a product photo of an indigo cotton kurta, "Indigo cotton kurta with white block print and a mandarin collar" is good: short, specific and focused on what a shopper needs. "Kurta" or "image of clothing" would be weak.
What is an example of alt text for a logo?
If the logo links home, use the name plus the destination, like "Lotus Travel home page". If it is not linked, the organisation name alone is enough. Do not add the word logo.
What is an alt text example for a chart?
State the type and the main point, such as "Line chart: monthly visits climb from about 8,000 to 21,000 over six months", then put the full figures in a table or text next to the chart.
What does alt text look like when an image is broken?
The browser shows the alt text where the image should be, often beside a small broken image icon. If the alt is a file name, that file name is all the visitor sees.
Can two images on one page have the same alt text?
Yes, if they do the same job, such as two identical Print buttons. Different photos with the same alt text usually means someone copied a default and needs fixing.