The fastest way to learn to write alt text is to see what works and what doesn't, side by side. Below are 30+ examples across the image types that actually appear on websites: product photos, charts, hero images, screenshots, decorative graphics, infographics, memes, logos, team photos, and recipe shots.

Each example follows the same pattern: a Bad version (filename or a generic word), an Okay version (technically correct but unhelpful), and a Good version (what you should actually ship). For the underlying rules, see What Is Alt Text?.

Product photos (ecommerce)

Product alt text is where most ecommerce sites fail. The pattern: filename or two-word description. The fix: name the product, list the visible attributes a buyer would care about, and skip the marketing fluff.

• Bad: "DSC_0421.jpg"
• Okay: "Blue running shoe"
• Good: "Men's Nike Pegasus 41 in royal blue, side view, white midsole, black laces"

• Bad: "shirt"
• Okay: "Cotton t-shirt"
• Good: "Heather grey crew-neck cotton t-shirt with embroidered chest logo, flat lay, men's medium"

• Bad: "chair"
• Good: "Mid-century walnut dining chair with curved backrest and tan leather seat, three-quarter angle"

For Shopify and WooCommerce stores, automating product alt text is the only way to keep up — see How to Add Alt Text to Shopify (2026) and WordPress Alt Text in 2026.

Hero images (homepage and landing pages)

Hero alt text is unusual because the image is often atmospheric — it sets a mood rather than depicting a specific subject. Describe the mood, the subject if there is one, and skip the brand-speak.

• Bad: "hero.jpg"
• Okay: "Team working together"
• Good: "Three coworkers reviewing a laptop screen at a sunlit conference table, warm afternoon light"

Charts and graphs

Charts are the highest-stakes alt text. A blind reader can't see the bars; if your alt text says "chart showing data," they get nothing. Describe the takeaway, not the chart type.

• Bad: "chart.png"
• Okay: "Bar chart of monthly revenue"
• Good: "Bar chart: Product A revenue grew from $10K in January to $20K in June; Product B steady at $12K; Product C declined from $15K to $8K"

• Bad: "line graph"
• Good: "Line graph: site traffic doubled from 50K to 100K monthly sessions between January 2024 and December 2025, with a flat plateau from March through July"

Infographics

Infographics need alt text plus a long description. Alt text alone can't carry a 12-data-point graphic. The convention is short alt text summarizing the headline finding plus a long description in the surrounding text.

• Bad: "infographic.jpg"
• Good (alt + long description): Alt: "Infographic: AI search referrals grew 4x year-over-year in 2025" — followed by a paragraph or linked transcript page covering each data point.

UI screenshots

Screenshots in tutorials need to communicate what's on screen, not just "screenshot." Name the application and the salient UI element.

• Bad: "screenshot1.png"
• Good: "Shopify product editor with the AltText.ai panel showing auto-generated descriptions for 12 product images"

Logos

Logos that link somewhere need alt text describing the link destination, not the visual. Logos that don't link are usually decorative when paired with the brand name in adjacent text.

• Bad: "logo.svg"
• Okay: "Company logo"
• Good (linked logo): "AltText.ai home"
• Good (decorative logo next to brand name): alt=""

Team and headshots

• Bad: "jane.jpg"
• Good: "Jane Chen, Head of Engineering, smiling in a navy blazer in front of a brick wall"

Memes and stylized images

Memes need both the image description AND the text overlay transcribed. Without the transcription, a screen reader user gets no joke.

• Good: "Distracted boyfriend meme: man labeled 'me' looks back at woman labeled 'shiny new framework' while ignoring his date labeled 'the codebase that pays the bills'"

Recipe and food photography

• Bad: "pasta"
• Good: "Bowl of cacio e pepe pasta with cracked black pepper and shaved pecorino, served on a white linen napkin"

Decorative graphics

Decorative images should always have empty alt — not missing alt. Empty alt tells the screen reader to skip cleanly. Missing alt makes it fall back to the filename.

• Bad: "texture.png"
• Good: alt=""

Next steps

If your site has more than 100 images, manually writing this kind of alt text for each one isn't realistic. Run a free crawl to see how many of your images are missing alt text right now, then automate it with AltText.ai — pricing starts free with 25 images included. For deeper context: What Is Alt Text?, Alt Text vs Caption, and Common Alt Text Mistakes.