Alt Text for Placeholder and Fallback Images: Practical Rules
Apply practical image alt text placeholder rules for loading states, error fallbacks, decorative placeholders, and screen reader accessibility across WCAG guidelines.
Alt text rules for standard content images are well understood, but placeholder and fallback images create cases that do not fit neatly into the standard guidance. A loading skeleton is decorative; a fallback image for a failed product photo is not.
This guide covers WCAG rules for decorative vs informative images, practical alt text choices for loading states and error fallbacks, how screen readers handle these states, and real examples from production UI patterns.
Two categories
Decorative vs informative: the WCAG image alt text rule
WCAG 2.1 Success Criterion 1.1.1 requires that all non-decorative images have a text alternative that describes the image's purpose or content. Decorative images—images that add visual interest but convey no information needed to understand the content—should use empty alt attributes (alt="") so screen readers skip them.
The key question for placeholder and fallback images is: does this image convey information the user needs? A loading skeleton is decorative—it conveys state, not content. A fallback image for a product photo that failed to load is informative—it represents a product the user is looking at.
Getting this distinction wrong causes real accessibility problems. An empty alt on a product fallback means screen readers skip the image slot entirely, giving blind users no indication that a product image should be there. A long alt text on a skeleton loader means screen readers announce the loading state for every item in a skeleton grid, which is noisy and confusing.
Loading states
Alt text for skeleton and blur placeholder loading states
Skeleton loaders and blur placeholders are used while content loads. They are transitional UI states, not content. Use empty alt="" on these images so screen readers do not announce the loading state.
If you want to communicate the loading state to screen reader users, use an aria-label on the container element or add an aria-live region that announces when content finishes loading. Do not put loading state information in image alt attributes.
In practice: a product card skeleton with an img element showing a shimmer placeholder should have alt="". The screen reader user does not need to hear 'shimmer placeholder 400x300' for every card in the grid.
<!-- Loading skeleton: decorative, empty alt -->
<div class="card" aria-label="Loading product">
<img
src="https://fallback.pics/api/v1/animated/skeleton/400x300"
alt=""
width="400"
height="300"
role="presentation"
/>
<div class="skeleton-text" aria-hidden="true"></div>
</div>
<!-- Content loaded: informative, meaningful alt -->
<div class="card">
<img
src="/product-photo.jpg"
alt="Running shoes in blue and white, size range 6-13"
width="400"
height="300"
/>
<h3>Running Shoes</h3>
</div>Error fallbacks
Alt text when the image alt text placeholder is an error state
When a product or content image fails to load and is replaced by a fallback URL via onerror, the alt attribute should still describe the intended content, not the failure. If the original img has alt="Running shoes" and the src fails, the fallback should also have alt="Running shoes".
In most implementations, the alt attribute is set on the img element and does not change when the src changes via onerror. As long as your original alt is correct, the error fallback inherits it automatically. The alt attribute only needs special handling if you are dynamically generating it.
If the fallback image itself conveys context—for example, a product placeholder labeled with the product name—that label is already in the fallback URL as a text parameter and will be visible to sighted users. The alt should describe the product, not the placeholder label.
<!-- Original image with good alt text -->
<img
src="/products/running-shoes.jpg"
alt="Running shoes in blue and white"
width="400"
height="300"
onerror="this.onerror=null; this.src='https://fallback.pics/api/v1/400x300/F3F4F6/9CA3AF?text=Running+Shoes'"
/>
<!-- If the src fails, alt is still "Running shoes in blue and white" ✓ -->Empty avatar slots
Alt text for user avatar fallbacks and initials placeholders
User avatar slots without an uploaded photo typically show initials or a generic user icon. The alt text should identify the user, not describe the placeholder. If the avatar represents a user named Jane Doe, use alt="Jane Doe" or alt="Profile photo for Jane Doe".
Generic user icon fallbacks that do not identify a specific user can use alt="User" or alt="Profile photo" depending on context. If the avatar is next to a username, it may be redundant and can use alt="" to avoid announcing the same name twice in quick succession.
For a list of users or contributors, screen readers will read through each item sequentially. Consistent, specific alt text on avatar fallbacks ensures the list is comprehensible to users who cannot see the images.
<!-- Avatar with user name in alt -->
<img
src="{{ user.avatarUrl }}"
alt="{{ user.name }}"
width="48"
height="48"
onerror="this.onerror=null; this.src='https://fallback.pics/api/v1/avatar/48?text={{ user.initials }}'"
class="rounded-full"
/>
<!-- Generic user icon: alt describes function not appearance -->
<img
src="https://fallback.pics/api/v1/avatar/48?text=?"
alt="Unknown user"
width="48"
height="48"
/>Test placeholders
Alt text for placeholder images in testing and Storybook
Placeholder images in test fixtures and Storybook stories should have descriptive alt text that matches what the real image would show. This makes visual regression tests more meaningful and ensures that accessibility testing tools do not flag placeholder images as missing alt text.
In Storybook, placeholder args that replace real product images should use the product category or description as the alt text, not placeholder-specific text like 'placeholder 400x300'. This produces more realistic accessibility audits during development.
// Storybook args with descriptive alt text
export const ProductCard = {
args: {
imageUrl: 'https://fallback.pics/api/v1/400x300',
imageAlt: 'Product photo', // matches what the real image would show
title: 'Product Name',
},
};
// Not this:
imageAlt: 'Placeholder 400x300', // describes the placeholder, not the contentDynamic alt
Dynamically generating alt text from content metadata
When image content is loaded from a CMS or API, the alt text should come from the same data source as the image URL. CMS systems like Contentful, Sanity, and WordPress store alt text alongside image files. Use that metadata when available rather than generating alt text from image filenames or dimensions.
When alt text is absent from the CMS entry, fall back to the content title, product name, or post title. That is almost always a more useful description than an empty alt or a filename-derived string. Set up CMS validation rules that flag content entries without image alt text as incomplete.
Key takeaways
What to standardize before shipping
- Loading skeleton and blur placeholders are decorative—use empty alt="" so screen readers skip them.
- Error fallback images inherit the original alt attribute; no change needed when swapping src via onerror.
- User avatar fallbacks should use the user's name as alt text, not a description of the placeholder.
- Test fixtures and Storybook stories should use content-descriptive alt text, not placeholder-specific text.
- Pull alt text from your CMS image metadata; fall back to content titles when image alt text is absent.
Production fallback layer
Use fallback.pics anywhere an image URL is accepted.
Start with one deterministic URL and standardize fallback behavior across your design system.
Continue reading
Related articles
How Broken Images Hurt SEO (and Fix Them with Fallback URLs)
Understand how broken images seo impact affects crawling, Core Web Vitals CLS, and structured data. Fix broken images with onerror fallback URLs before they cost you rankings.
How to Fix Broken Images in HTML with onerror
Use the HTML img onerror fallback pattern to replace broken images with stable fallback.pics URLs while preserving layout, alt text, and production safety.
Avatar Placeholder Generator: Initials, Colors, and Accessibility
A practical guide to initials-based avatar placeholders, readable colors, alt text, privacy-safe labels, and profile image fallback behavior.