Key Takeaways
- Good alt text = subject + variant + context, under ~125 characters.
- Decorative images use
alt=""— empty is correct, not a mistake. - Functional images describe the action, not the icon.
- Use the free scanner to find images that still need better alt.
In This Article
The 3 Rules Behind Every Example
Before the examples, three rules that make or break alt text:
- Describe the subject. What is in the image, in plain language?
- Add context that matters. Variant, angle, state, or action.
- Stay concise. Under ~125 characters so screen readers do not cut off.
Everything below applies these three rules. Where a "bad" example is shown, it breaks one of them.
Product Image Examples
| Good alt text | Bad alt text | Why |
|---|---|---|
| "Women's navy wool blazer with gold buttons, front view" | alt="image" | No info |
| "Stainless steel 20oz water bottle, midnight black" | alt="bottle.jpg" | Filename |
| "Leather crossbody bag, tan, worn by model" | alt="bag bag bag sale bag" | Stuffed |
| "Men's red running sneakers, size 11, top view" | alt="shoe" | Too vague |
| "Ceramic coffee mug, matte white, 12oz, side view" | alt="mug" | No variant |
Logo & Brand Examples
| Good alt text | Bad alt text | Why |
|---|---|---|
| alt="Scan Alt logo" | alt="logo" | Brand name missing |
| alt="Nike" (when linked to home) | alt="swoosh icon" | Describes mark, not brand |
If the logo is inside a link that also contains the company name as visible text, use alt="" to avoid duplicate announcements.
Chart & Infographic Examples
| Good alt text | Bad alt text | Why |
|---|---|---|
| "2024 quarterly revenue bar chart, Q1 $420K to Q4 $645K" | alt="chart" | No data |
| "Infographic: 5 steps to write alt text" + longer figcaption | alt="infographic final v3" | Filename |
For complex images, pair a short alt with a longer description in the surrounding text or a figcaption.
Functional & Icon Examples
| Good alt text | Bad alt text | Why |
|---|---|---|
| alt="View shopping cart" (in a link) | alt="cart icon" | Should name action |
| alt="" (icon next to "Checkout" text) | alt="checkout button icon" | Redundant with text |
Decorative Image Examples
Decorative images should use empty alt. That is correct, not a gap:
| Image type | Correct alt | Wrong alt |
|---|---|---|
| Section divider | alt="" | alt="blue wavy line" |
| Background pattern | alt="" | alt="pattern" |
| Spacer image | alt="" | alt="spacer" |
Quick Self-Check Checklist
- Does the alt describe what a screen-reader user needs to know? ✅
- Is it under ~125 characters? ✅
- Does it include the product name and key variant? ✅
- Is decorative content set to
alt=""? ✅ - Is there no keyword stuffing? ✅
- Does a functional image describe the action, not the icon? ✅
Find images that need better alt.
Scan any URL for missing, empty, or weak alt text. Free for up to 50 images/month.
Free Alt Text ScanFAQ
What is a good example of alt text for a product image?
A good product image alt text includes the product name, the key variant, and the view. Example: "Women's navy wool blazer with gold buttons, front view." Keep it under about 125 characters and avoid keyword stuffing.
What is the alt text for a decorative image?
Decorative images such as dividers, background patterns, and ornamental icons should use empty alt text: alt="". This tells screen readers to skip the image instead of announcing meaningless descriptions.
How long should alt text be?
Aim for concise descriptions, ideally under 125 characters, which is roughly where many screen readers truncate. For complex images like charts, use a short alt plus a longer text description nearby.