Examples
Good Alt Text Examples
Context: Product page for coffee mug
Image: Red ceramic mug
Alt Text: "Red ceramic coffee mug, 12 oz capacity"
Why it's good: Describes the product clearly and includes relevant details (color, material, size).
Context: Blog post about team meeting
Image: People in conference room
Alt Text: "Marketing team reviewing quarterly results on whiteboard"
Why it's good: Describes who, what, and context without being overly detailed.
Context: Save button with icon
Image: Floppy disk icon
Alt Text: "Save"
Why it's good: Describes the function, not the appearance. Users don't need to know it's a floppy disk icon.
Bad Alt Text Examples
Context: Team member bio
Image: Portrait photo
Alt Text: "Image"
Why it's bad: Generic, provides no useful information. Should describe who is in the photo.
Context: Decorative page divider
Image: Ornamental swirl
Alt Text: "Beautiful decorative swirl pattern with blue and gold colors"
Why it's bad: Decorative images should have empty alt (alt="") to avoid cluttering screen reader output.
Context: News article photo
Image: City skyline
Alt Text: "IMG_20240315_142502.jpg"
Why it's bad: Filename provides no information. Should describe the skyline and its relevance to the article.
Help
What Makes Good Alt Text?
- Concise: Typically under 150 characters
- Descriptive: Describes the content and function
- Contextual: Relevant to the page content
- Specific: Avoids generic terms like "image" or "photo"
- Functional: For buttons/links, describes the action
Decorative vs Informative Images
Informative images convey content or function and need descriptive alt text:
- Photos that illustrate content
- Charts, graphs, diagrams
- Functional images (buttons, links)
- Images of text
Decorative images are purely visual and should have empty alt text (alt=""):
- Borders and dividers
- Eye candy with no informational value
- Images fully described in adjacent text
Common Mistakes to Avoid
- Starting with "image of" or "picture of" (screen readers already announce it's an image)
- Using filenames as alt text (e.g., "IMG_5847.jpg")
- Being overly detailed (keep it under 150 characters when possible)
- Using generic terms like "image", "photo", "graphic"
- Duplicating surrounding text exactly
- Describing decorative images
Alt Text for Different Image Types
Photos of people: Include names and relevant context
Example: "Dr. Sarah Johnson presenting at conference"
Charts/graphs: Summarize key finding
Example: "Bar chart showing 42% sales increase in Q3"
Logos: Include company/product name
Example: "Acme Corporation"
Icons: Describe function, not appearance
Example: "Search" not "Magnifying glass icon"
Product images: Include key details
Example: "Women's running shoes, blue and white, size 8"
Testing Your Alt Text
To verify alt text quality:
- Read the page with alt text replacing images - does it make sense?
- Use a screen reader (NVDA, VoiceOver) to hear how it sounds
- Ask: "Would someone understand this without seeing the image?"
- Ensure it's not redundant with surrounding text
- Check that it's concise but informative
Alt Text Length Guidelines
Ideal: 125 characters or less
Maximum: 150 characters (some screen readers truncate after this)
Too short: Less than 10 characters (unless it's a simple icon/logo)
If you need more detail, consider:
- Using a figure caption
- Providing description in adjacent text
- Using aria-describedby for longer descriptions