Alternative text (alt text) is essential for making images accessible to screen reader users. Good alt text conveys the meaning and purpose of images in a concise, descriptive way.
Why Alt Text Matters
Images are a fundamental part of web content, but they’re inherently inaccessible to users who can’t see them. Alt text bridges this gap by providing a text equivalent that conveys the same information and meaning as the visual image.
For screen reader users: Alt text is their only way to understand what images contain. Without alt text, screen readers either skip images entirely or announce “image” with no context, leaving users completely in the dark about important visual content.
For users with visual impairments: Alt text provides the same information that sighted users get from looking at images. This includes not just what’s in the image, but also its purpose and context within the page.
For users on slow connections: When images fail to load, alt text provides a fallback that ensures users don’t miss important information or functionality.
For users with cognitive disabilities: Clear, descriptive alt text helps users understand the relationship between images and surrounding content, reducing confusion and improving comprehension.
For all users: Alt text improves the overall user experience by ensuring that no information is lost when images are unavailable or inaccessible.
The Impact of Missing or Poor Alt Text
When alt text is missing or inadequate, it creates significant barriers:
- Screen reader users miss important information, context, and functionality
- Users with visual impairments can’t understand the full content of the page
- All users lose information when images fail to load
- Content creators fail to reach their full audience effectively
This is why WCAG 1.1.1 (Non-text Content) specifically requires text alternatives for all non-text content, including images.
Basic Alt Text
For simple images, provide clear, descriptive alt text:
<img src="cat.jpg" alt="A fluffy orange cat sitting on a windowsill" />Why this works:
- Describes what’s in the image - provides specific details that help users visualize the content
- Conveys the image’s purpose - explains why the image is there and what information it provides
- Is concise but informative - gives enough detail without being overly verbose or redundant
- Uses natural language - sounds natural when read aloud by screen readers
- Focuses on relevant details - emphasizes what’s important for understanding the content
Decorative Images
For purely decorative images, use empty alt text:
<img src="decorative-border.png" alt="" />When to use empty alt:
- Purely decorative elements
- Images that don’t add meaning
- Spacer images
- Background decorative elements
Functional Images
For images that serve a function (like buttons or links):
<a href="/search">
<img src="search-icon.png" alt="Search" />
</a>
<button>
<img src="close-icon.png" alt="Close dialog" />
</button>Complex Images
For charts, graphs, or complex images, provide detailed descriptions:
<img src="sales-chart.png" alt="Bar chart showing quarterly sales: Q1 $50K, Q2 $65K, Q3 $80K, Q4 $95K. Overall trend shows consistent growth." />Images with Captions
When images have captions, the alt text should complement, not duplicate:
<figure>
<img src="mountain.jpg" alt="Snow-capped mountain peak at sunset" />
<figcaption>Mount Everest at golden hour</figcaption>
</figure>CSS Background Images
For CSS background images, ensure the content is accessible through other means:
<div class="hero-section" role="img" aria-label="Mountain landscape at sunset">
<h1>Adventure Awaits</h1>
<p>Explore the great outdoors</p>
</div>SVG Images
For SVG images, provide proper accessibility:
<svg role="img" aria-label="Company logo">
<title>Company Name</title>
<!-- SVG content -->
</svg>Remember: Good alt text is descriptive, concise, and considers the image’s purpose in the context of the page.