Alt Text Examples: Good vs Bad (Templates for Every Image Type)
Managing alt text one image at a time works when your media library is small.
Once your site has been running for a year or two, that approach stops being practical. A bulk alt text editor solves the problem at the scale where it actually exists.
Writing alt text sounds simple until you are staring at your 300th product image wondering what to type. Most guides tell you to "describe the image." That is not enough. The difference between good and bad alt text is specific, and it matters for both accessibility and SEO. This guide gives you concrete examples for every image type you will encounter, plus templates to copy directly into WordPress.
What Makes Alt Text Good or Bad?
Before the examples, here is the framework that applies to every image type on your site.
- Specific and descriptive
- Concise (under 125 characters)
- Contextual, relevant to the surrounding content
- Free of keyword stuffing
- Written for someone who cannot see the image
- Generic ("image", "photo", "picture")
- Missing entirely
- Duplicated across multiple images
- Stuffed with keywords
- A copy of the image filename
The most common mistakes are not about writing badly. They are about not writing at all, or writing the same thing for every image.
Alt Text Examples by Image Type
01. Product Images
Product images are the highest-stakes alt text in e-commerce. They directly affect image search rankings and accessibility for visually impaired shoppers.
Example image: a navy blue ceramic coffee mug with a handle, sitting on a wooden table.
02. Charts and Graphs
Images inside articles should reinforce the surrounding text. Include the key result or finding, not just what type of chart it is.
Example image: a bar chart comparing page load times before and after image optimization, dropping from 4.2s to 1.8s.
03. Infographics
Infographics are complex. You cannot describe every element. Summarize the core message in one sentence instead.
04. People and Portraits
Describe who the person is and what they are doing, not their physical appearance unless it is directly relevant to the content.
Example image: a woman presenting slides at a conference on stage.
05. Logos
Logos should identify the brand and nothing more. If the logo is inside a link, the alt text should describe the destination rather than the image itself.
06. Decorative Images
Not every image needs alt text. Decorative images (backgrounds, dividers, aesthetic shapes) should have an empty alt attribute (alt=""), not missing alt text. The difference matters.
- Screen reader announces the filename
- Counted as an accessibility failure
- Flagged in Filikod's audit
- Screen reader skips the image
- Intentional and fully valid
- Not flagged as an issue
07. Screenshots
Describe what the interface shows, not just that it is a screenshot. Include the software name and the key element visible.
08. Icons
Icons with a visible text label: use alt="". The label already provides the information. Icons used without any visible label need a descriptive alt.
<img src="search-icon.svg" alt=""> <span>Search</span>
<!-- Standalone icon, no label -->
<img src="search-icon.svg" alt="Search">
The Most Common Mistakes (And How to Fix Them)
Screen readers already announce that it is an image. Starting with "Image of" is redundant and wastes characters.
This happens when alt text is auto-generated from the filename without cleanup. Filikod detects this automatically in the Generic issues tab.
Very common on e-commerce sites with product variants. Each image needs a distinct description even if the product is the same.
Alt text written for search engines instead of users creates an accessibility failure and can negatively impact SEO rankings.
Quick Reference by Image Type
| Image type | Template |
|---|---|
| Product | [Color] [Material] [Product] [Key variant] |
| Chart | [Chart type] showing [metric] [key result] |
| Infographic | Infographic: [main topic in one sentence] |
| Person | [Name or role] [action] at [context] |
| Logo | [Brand name] logo |
| Screenshot | [Software] [screen] showing [key element] |
| Decorative | alt="" (empty, intentional) |
| Icon with label | alt="" (label is already visible) |
| Icon without label | [Action the icon represents] |
How to Audit Your Existing Alt Text
Writing good alt text going forward is only half the problem. Most WordPress sites already have hundreds of images with missing, generic, or duplicated alt text. Fixing them one by one is not realistic.
The efficient approach:
- Run an audit to identify which images have issues and what type (missing, generic, duplicated, too short)
- Prioritize by issue type: missing alt text first, then generic, then duplicated
- Use bulk editing to fix multiple images at once, filtered by issue type
Filikod handles all of this directly inside WordPress. No export, no spreadsheet, no external tool required.
Free WordPress plugin
Fix your alt text at scaleFilikod gives you a free ALT Quality Score and bulk editing tools, directly inside WordPress.
Audit your media library for free