How to Write Alt Text: 50+ Examples for Every Scenario

Writing effective alt text is a practical skill that improves with exposure to diverse examples and understanding of how context shapes description requirements. According to WebAIM's annual analysis, images with missing or poor alt text remain the most common accessibility error on the web, consistently affecting over 55% of all homepages year after year. This guide provides actionable, real-world examples for every common image scenario you will encounter across e-commerce, content publishing, marketing, education, and social media.

Product Photography Alt Text Examples

Product images need to convey what the item is, its key distinguishing features, and attributes that affect purchase decisions. Good alt text enables customers to evaluate products without viewing the image and helps product pages rank in image search for relevant queries. Always start with the product name, include distinguishing attributes like color, size, material, and pattern, and mention any notable features. Compare these examples: poor alt text says "blue shirt" while effective alt text says "Men's slim-fit Oxford cloth button-down shirt in navy blue with barrel cuffs and a button-down collar, part of the professional essentials collection." The detailed version serves both screen reader users and Google Image Search equally well.

Blog and Content Image Alt Text Examples

Blog images should support and enhance the surrounding content without simply repeating the paragraph text verbatim. A travel photo description of "Sunset view of Santorini's iconic blue-domed churches with white-washed buildings from the Oia castle viewpoint during golden hour, cruise ship visible in the caldera below" provides useful contextual information. A screenshot for a software tutorial should read "Gmail settings page showing the signature section with the compose area open and formatting toolbar visible" rather than the generic "screenshot of settings." Recipe images should make the reader visualize the finished dish: "Chocolate lava cake with molten center spilling onto the plate, served with vanilla bean ice cream and fresh raspberries, dusted with powdered sugar."

Charts, Graphs, and Data Visualization Alt Text

Data visualizations require alt text that communicates the key insight or trend, not a recitation of every data point. The purpose of a chart is to make patterns visible, and alt text should replicate that pattern recognition verbally. "Bar chart showing company revenue growth from 2020 through 2025 — steady upward trend with notable acceleration in 2023 driven by enterprise segment expansion, reaching a record $42 million in 2025" provides the essential takeaway. For complex multi-variable charts, include the primary insight in the alt text and link to an accessible data table below the chart for users who need exact values.

Logo, Brand, and Icon Image Alt Text Examples

Logos used as navigation links back to the homepage should use the site name as the alt text. "Back to CompanyName homepage" communicates both the content and the link function. Partner, sponsor, and certification logos appearing in page content need context: "Certified B Corporation logo" or "Sponsored by OrganizationName." Functional icons — search magnifying glass, shopping cart, settings gear — need alt text describing the action they perform: "Search the site," "View shopping cart," "Open settings." Avoid using the word "icon" or "button" in alt text since screen readers already announce the element type.

FAQ

What is the most common alt text mistake?

Using completely generic alt text like "image," "photo," "picture," or "graphic" as the description. Screen reader users hear "image" announced for every image without learning anything about the content. Each distinct image needs a unique, descriptive alternative that communicates its specific content and purpose.

Should I include the words "image of" or "photo of" in alt text?

No. Screen readers already announce the HTML element type to users before reading the alt text content. Starting your description with "image of" or "photo of" creates unnecessary redundancy. The sole exception is when distinguishing between illustration, photograph, diagram, or screenshot is important contextual information.

How do I write alt text for a software screenshot for a tutorial?

Describe what the screenshot shows, its purpose in the tutorial, key UI elements visible, and the specific state or configuration being demonstrated. Example: "WordPress block editor showing the image block settings sidebar with the alt text field highlighted and containing a sample description."

What is the correct alt text for icon buttons?

Icon buttons need alt text describing the action the button triggers, not the visual appearance of the icon. "Search the website" not "magnifying glass icon." "Add item to shopping cart" not "shopping cart symbol." The function matters for both screen reader utility and search engine understanding.

Do CSS background images need alt text?

CSS background images are automatically ignored by all major screen readers and do not require alt text. However, if a background image conveys informational content — a hero section with overlaid text, for example — that image and its content should be moved to an HTML element with appropriate alt text rather than implemented as a CSS background.

What is the correct implementation for purely decorative images?

Use empty alt text (alt="") for purely decorative images — visual elements that add atmosphere, spacing, or visual interest but convey no informational content. This explicitly tells screen readers to skip the image entirely, reducing auditory clutter. Never omit the alt attribute and never leave it completely missing.