Image Alt Text
Descriptive, decorative, and missing alt text
Alternative text (alt text) describes images for users who cannot see them - including screen reader users, users with images disabled, and search engines. Good alt text conveys the purpose and content of the image, not just a literal description of what it depicts.
The three states
| State | Markup | Meaning |
|---|---|---|
| Descriptive | alt="Children at the Summer Reading kickoff" | Image conveys meaningful information |
| Empty | alt="" | Image is purely decorative - screen readers skip it |
| Missing | No alt attribute | Always wrong - screen readers announce the filename |
The violation image-alt fires on images with no alt attribute at all. An empty alt="" is correct and intentional - it is not a violation.
What to avoid
<img src="/images/IMG_4823.jpg">
<img src="/images/banner.jpg" alt="image">
<img src="/images/logo.png" alt="logo.png">No alt attribute causes the screen reader to announce the filename. "image" is redundant - screen readers already identify images. Filenames as alt text are meaningless.
Best practice
<img src="/images/summer-reading.jpg"
alt="Children at the Summer Reading kickoff, holding books and certificates">
<img src="/images/divider.png" alt="">
<img src="/images/logo.svg" alt="Springfield Public Library">Writing good alt text
- Describe what matters, not everything visible
- For logos: use the organization name, not "logo"
- For functional images (icons, buttons): describe the function, not the appearance
- For charts and graphs: describe the key insight, not every data point
- Do not start with "image of" or "photo of" - screen readers already announce it is an image
- Aim for under 125 characters for simple images
Decorative images
If an image adds no information not already present in surrounding text - a background texture, a section divider, a generic stock photo used for visual tone - use an empty alt attribute:
<img src="/images/section-divider.png" alt="">This tells assistive technology to skip the image entirely. Never omit the alt attribute on a decorative image - without it, screen readers announce the filename.
For CSS background images, no extra markup is needed - they are invisible to screen readers by default.
Vesper Inspect shows alt status for every image you hover over - green if present, amber if empty (decorative), red if missing.
Common mistakes
- "Image of..." or "Photo of..." - redundant, screen readers already announce the image
- Filename as alt text - a CMS that auto-populates alt from filename is not a solution
- The same alt text on every image - each alt text should describe that specific image
- Leaving decorative images with no
alt- usealt="", not a missing attribute