Imagine you're having a conversation with someone who can't see the photos you're showing them—how would you describe what's in the images so they could fully participate in the conversation? That's essentially what alt text does on the web.
Alt text (alternative text) is a written description of an image that appears in the HTML code rather than visually on the page. This text serves as a replacement for the image when it cannot be seen—whether that's by a person using a screen reader, someone with a slow internet connection where images haven't loaded, or in cases where the image file itself is broken.
Adding proper alt text to your images delivers three significant benefits that extend far beyond basic accessibility compliance:
Beyond these practical benefits, alt text represents something more fundamental: a commitment to ensuring everyone has equal access to the information and experiences your website provides, regardless of their abilities or the technology they use.
While the user experience benefits of alt text are compelling on their own, there's also a legal dimension to consider. Many jurisdictions around the world now require digital accessibility compliance, including proper image descriptions. The Americans with Disabilities Act (ADA), European Accessibility Act, and similar laws worldwide have been interpreted to apply to websites, leading to a significant increase in accessibility-related lawsuits. Properly implemented alt text is one of the most basic requirements checked during legal reviews.
Writing good alt text is both an art and a science. It requires balancing completeness with conciseness while focusing on what's truly important about the image. Here are the core principles:
The ultimate test for good alt text is whether a person who cannot see the image gets the same essential information and experience as someone who can.
To illustrate the principles of effective alt text, let's look at some concrete examples:
Notice how the good examples provide specific, relevant details that help the user understand what they're missing visually, while still being concise.
Implementation is straightforward once you understand the principles. Here's how to add alt text in different contexts:
In standard HTML, alt text is added as an attribute to the img tag.
<!-- Basic image with alt text -->
<img src="red-leather-wallet.jpg" alt="Slim red leather bifold wallet with six card slots and coin pocket">
<!-- Decorative image that should be ignored by screen readers -->
<img src="decorative-divider.png" alt="">
<!-- Complex image with brief alt text and longer description elsewhere -->
<img src="quarterly-sales-chart.png" alt="Q2 2025 sales chart showing 27% year-over-year growth" aria-describedby="chart-description">
<p id="chart-description">The chart details regional sales increases: North America (+32%), Europe (+24%), Asia (+29%), and other regions (+18%).</p>Note that using an empty alt attribute (alt="") is different from omitting the alt attribute entirely. Empty alt text tells screen readers to skip the image, while missing alt attributes will often cause screen readers to read the file name instead.
Most popular CMS platforms make it easy to add alt text:
Most platforms now prominently feature alt text fields, recognizing their importance for accessibility and SEO.
Email clients often block images by default, making alt text even more important:
For email marketing, alt text serves double duty—it helps with accessibility and ensures your message comes through even when images are blocked.
Many social platforms now support alt text for images:
Adding alt text on social media helps your content reach a wider audience and demonstrates a commitment to accessibility.
Different types of images require different approaches to alt text:
Challenge: Charts, graphs, infographics, and diagrams often contain too much information to concisely describe in alt text.
Solution: Use a two-part approach:
<img src="complex-data-visualization.png" alt="2025 Market Share Analysis: Our company leads with 34%" aria-describedby="viz-description">
<div id="viz-description" class="sr-only">
This chart breaks down market share as follows:
- Our Company: 34%
- Competitor A: 27%
- Competitor B: 22%
- Competitor C: 12%
- Others: 5%
Year-over-year trends show our growth accelerating in Q3 and Q4.
</div>Challenge: Some images serve only aesthetic purposes and provide no informational content.
Solution: Use empty alt text (alt="") for purely decorative images to indicate screen readers should skip them entirely. Common examples include:
<!-- Decorative flourish that should be ignored by screen readers -->
<img src="decorative-flourish.png" alt="">
<!-- Even better, use CSS background images for purely decorative elements -->
<div class="decorative-background"></div>Challenge: Screenshots, memes, or graphics that contain important text present special challenges.
Solution: Include all important text from the image in your alt text:
<!-- Screenshot of error message -->
<img src="error-screenshot.png" alt="Error message: 'Database connection failed. Error code 5331. Contact system administrator.'">
<!-- Meme with text -->
<img src="distracted-boyfriend-meme.jpg" alt="'Distracted boyfriend' meme with labels: Boyfriend looking at 'New JavaScript Framework' while girlfriend 'Existing Project' looks disappointed">Challenge: E-commerce and product images need to balance promotional language with factual description.
Solution: Focus on specific, distinguishing features that would help a customer make a purchasing decision:
<!-- Specific product features -->
<img src="headphones.jpg" alt="Wireless over-ear headphones in matte black with cushioned earpads and 30-hour battery life">
<!-- Multiple product views -->
<img src="jacket-front.jpg" alt="Navy blue waterproof hiking jacket with reflective strips, front view">
<img src="jacket-back.jpg" alt="Navy blue waterproof hiking jacket showing adjustable hood and ventilation zippers, back view">Even with the best intentions, these common mistakes can undermine your alt text efforts:
Remember that the ultimate goal is to provide an equivalent experience to all users, regardless of whether they can see the images.
When implemented properly, alt text brings multiple benefits to businesses:
These benefits combine to create both tangible and intangible improvements to your website's performance and your business's bottom line.
Here are some examples of how organizations have approached alt text implementation:
By applying thoughtful alt text strategies appropriate to your industry and content type, you can create a more inclusive user experience while potentially improving your site's performance.
Alt text represents one of the most fundamental principles of an accessible, inclusive web: ensuring that everyone has access to the same information, regardless of how they interact with your content. It's a small implementation detail that makes a world of difference to millions of users.
What makes alt text particularly valuable is its multiple benefits. Unlike some accessibility features that solely benefit specific groups, alt text improves the experience for people with visual impairments, SEO performance, and the experience for all users under less-than-ideal conditions like slow connections or technical failures.
The practice of writing good alt text also encourages a valuable mindset shift among content creators and designers. It prompts us to think more deeply about why we're including specific images, what purpose they serve, and how they contribute to our overall message—considerations that ultimately lead to better content for everyone.
As we build an increasingly visual web, let's ensure that these visual experiences aren't creating new barriers. With thoughtful implementation of alt text, we can ensure that the power of visual communication is available to all of our users, creating a more inclusive and effective web for everyone.
Greadme's easy-to-use tools can help you identify missing or inadequate alt text on your website and provide simple, step-by-step instructions to fix these issues—even if you're not technically minded.
Check Your Website's Alt Text Today