20 Alt Text Examples (Annotated, by Category)

Good alt text is clear, concise, and describes what a user needs to know about an image. Below are 20 real-world examples across different categories, each with notes on why it works.

Product Images

Example 1: Simple Product

Image: A blue ceramic coffee mug on a white background.

Good alt text: "Blue ceramic coffee mug with smooth finish"

Why it works: Describes the product, color, material, and key detail without being redundant. Avoids "image of" or "picture of."

Example 2: Product with Context

Image: A person wearing a navy blazer, seated at a desk with a laptop.

Good alt text: "Navy wool blazer paired with a white collared shirt, worn while working at a desk"

Why it works: Conveys the product's fit and context for styling, helpful for e-commerce.

People & Portrait Images

Example 3: Professional Headshot

Image: A professional headshot of a woman smiling at the camera.

Good alt text: "Dr. Sarah Chen, neurologist, smiling at camera"

Why it works: Includes context (role) and description. On a professional bio page, this tells readers who they're seeing.

Example 4: Group of People

Image: Five people standing in front of a building.

Good alt text: "Team photo of five Neartool staff members standing outside the main office"

Why it works: Identifies the purpose and number of people, plus location context.

Landscape & Travel

Example 5: Scenic Landscape

Image: A mountain range at sunset with pink and orange sky.

Good alt text: "Snow-capped mountain range under a pink and orange sunset sky"

Why it works: Paints a clear picture using specific details. Helpful for blog posts or travel guides.

Food & Recipe Images

Example 6: Finished Dish

Image: A plate of pasta carbonara.

Good alt text: "Creamy pasta carbonara with bacon, egg, and fresh parmesan, garnished with parsley"

Why it works: Describes the dish, key ingredients, and presentation. Readers with images disabled still know what's being made.

Example 7: Food Preparation

Image: Hands chopping fresh herbs.

Good alt text: "Hands slicing fresh basil leaves on a cutting board"

Why it works: Describes the action and ingredient, important for step-by-step recipe guides.

Charts & Data

Example 8: Bar Chart (Short)

Image: A bar chart showing quarterly sales figures.

Good alt text: "Bar chart showing quarterly sales growth: Q1 $50k, Q2 $65k, Q3 $78k, Q4 $92k"

Why it works: Provides the key data points. For complex charts, this summary goes in alt text; a detailed table might appear below.

Example 9: Pie Chart

Image: A pie chart of market share.

Good alt text: "Market share distribution: Company A 45%, Company B 30%, Company C 15%, Others 10%"

Why it works: Lists percentages instead of just "pie chart" or "market share."

Screenshots & UI

Example 10: Form Screenshot

Image: A screenshot of a sign-up form.

Good alt text: "Sign-up form with fields for name, email, password, and a blue submit button"

Why it works: Describes the form's purpose and key fields. Helpful if the image is broken or for SEO context.

Logos & Icons

Example 11: Brand Logo

Image: The Neartool logo.

Good alt text: "Neartool logo"

Why it works: Simple and direct. Logos are often primarily decorative, but a one-word alt text is appropriate for a brand mark.

Example 12: Warning Icon

Image: A yellow triangle with an exclamation mark.

Good alt text: "Warning icon"

Why it works: Concise. If the warning is explained in text, you might use empty alt text or a longer description depending on context.

Decorative & Background Images

Example 13: Decorative Pattern

Image: A background pattern of geometric shapes (purely decorative, no information conveyed).

Good alt text: "" (empty)

Why it works: Decorative images get empty alt text. Screen readers skip them, reducing noise.

Infographics

Example 14: Process Flow

Image: An infographic showing a five-step process.

Good alt text: "Five-step process: (1) Upload image, (2) AI analyzes content, (3) Alt text generated, (4) Review draft, (5) Copy or export"

Why it works: Summarizes the flow without being overly long. A fuller description might appear in the page text or a linked document.

Diagrams & Technical Images

Example 15: System Architecture Diagram

Image: A diagram showing how data flows between components.

Good alt text: "System architecture diagram: User uploads image to client application, processed locally by AI model, results stored in IndexedDB, never sent to server"

Why it works: Explains the key concept without listing every component. Technical diagrams often need accompanying text or a detailed description elsewhere.

Screenshots & Error States

Example 16: Error Message Screenshot

Image: A browser error message.

Good alt text: "Browser console error: 'Uncaught ReferenceError: setupModel is not defined'"

Why it works: Reproduces the error text so readers understand what went wrong, even if the image is broken.

Before & After Images

Example 17: Before/After Comparison

Image: A before-and-after photo of a room renovation.

Good alt text: "Before and after: Left shows a drab gray room with old flooring; right shows the same room with white walls, hardwood flooring, and new fixtures"

Why it works: Clearly labels the sections and explains the changes.

Artwork & Illustrations

Example 18: Original Illustration

Image: A watercolor painting of wildflowers.

Good alt text: "Watercolor painting of purple and yellow wildflowers in a meadow"

Why it works: Describes the medium, colors, and subject. Helpful for gallery or art-blog contexts.

Video Thumbnails & Frames

Example 19: Video Thumbnail

Image: A frame from a tutorial video.

Good alt text: "Video thumbnail showing a hand using the Neartool alt text generator on a laptop"

Why it works: Describes what the video shows without trying to reproduce the full video in text.

Certificates & Official Documents

Example 20: Certificate Image

Image: A certificate of completion.

Good alt text: "Certificate of completion for the Accessibility Essentials course, issued to Jane Doe on October 27, 2026"

Why it works: Includes the key information (course name, recipient, date) in one sentence.

Key Takeaways

• Be specific: Describe what you see, not generic labels.
• Avoid "image of" or "picture of": Screen readers already announce images.
• Keep it concise: Aim for one sentence when possible; use ~125 characters.
• Convey purpose: Why is this image here? What does it add to the page?
• Use data points in charts: Don't just say "bar chart"; include the values.
• Empty alt for decorative images: alt="" tells assistive technology to skip them.