How to Write Alt Text That Actually Helps People

Alt text is one of those things that sounds simple until you actually sit down to write it. You have an image. You need to describe it. How hard can it be? Then you stare at a photo for 30 seconds wondering if "woman smiling" is enough or if you need to mention the laptop she's holding, the conference room behind her, and the color of her shirt.

I've reviewed thousands of accessibility scan reports through Free ADA Checker, and missing or bad alt text is consistently one of the top three issues on almost every site. It's also one of the easiest things to fix once you understand the principles behind it.

This guide will give you a clear framework for writing alt text that actually serves its purpose: helping people who can't see the image understand what it communicates. I'll walk through specific examples for different types of images, show you the most common mistakes, and give you a cheat sheet you can reference any time you're stuck.

What Alt Text Is and Why It Matters

Alt text (short for "alternative text") is the text that describes an image for people who can't see it. It lives in the alt attribute of an <img> tag. When a screen reader encounters an image, it reads the alt text aloud so the user knows what the image shows. If the image fails to load, the alt text is displayed in its place.

<img src="team-meeting.jpg" alt="Five team members gathered around a whiteboard discussing project timelines">

Without alt text, screen readers either skip the image entirely or, worse, read the filename. Imagine hearing "IMG underscore 4 7 2 3 dot JPEG" while trying to browse a website. That's the experience you're creating when you leave alt text empty.

Alt text also matters for WCAG compliance. WCAG 2.2 Success Criterion 1.1.1 (Non-text Content) is a Level A requirement, meaning it's the bare minimum for accessibility. Every image that conveys information needs a text alternative. There's no getting around it.

And there's an SEO angle too. Search engines use alt text to understand image content. Descriptive alt text helps your images show up in Google Image search and gives search engines more context about your page content. It's one of those rare cases where doing the right thing for accessibility directly benefits your search rankings.

The Decision Tree: Decorative vs Informational vs Functional

Before you write a single word of alt text, you need to answer one question: what purpose does this image serve? Every image on a website falls into one of three categories.

Informational Images

These images convey information that isn't available elsewhere on the page. A photo of your product, a chart showing quarterly revenue, a diagram explaining a process. If removing the image would cause someone to miss something, it's informational. These need descriptive alt text.

Functional Images

These images are used as links or buttons. A logo that links to the homepage, a social media icon that links to your Twitter profile, a magnifying glass icon inside a search button. For functional images, the alt text should describe the action, not the image. "Home page" or "Search," not "company logo" or "magnifying glass icon."

Decorative Images

These images exist purely for visual design. Background textures, divider lines, abstract illustrations that don't add meaning. If you could remove the image and the page would still make complete sense, it's decorative. These should have an empty alt attribute: alt="". Not "decorative image." Not "spacer." Just empty.

Here's a quick rule of thumb. Ask yourself: "If I replaced this image with its alt text, would the page still make sense?" If yes, your alt text is doing its job. If not, revise it. For a more detailed walkthrough, check out our complete alt text guide.

Writing Good Alt Text (Examples by Image Type)

Theory is nice, but let's look at real examples. Here's how to approach alt text for the types of images you'll encounter most often.

Photos of People

Describe who is in the photo and what they're doing. Include relevant context based on the surrounding content. You don't need to describe every visual detail.

<!-- Bad -->
<img src="ceo.jpg" alt="person">

<!-- Bad -->
<img src="ceo.jpg" alt="photo of a woman in a blue blazer standing in front of a beige wall with her arms crossed smiling at the camera">

<!-- Good -->
<img src="ceo.jpg" alt="Sarah Chen, CEO of Acme Corp">

<!-- Good (in context of an article about the new office) -->
<img src="ceo.jpg" alt="Sarah Chen giving a tour of the new downtown office">

Notice the difference. The bad examples are either too vague ("person") or too detailed (a paragraph describing clothes and wall colors). The good examples focus on what matters in context.

Charts and Graphs

Charts are tricky because they often contain dense data. Your alt text should summarize the key takeaway, not list every data point. If the full data is important, consider adding a table below the chart or linking to a text summary.

<!-- Bad -->
<img src="chart.png" alt="chart">

<!-- Bad -->
<img src="chart.png" alt="bar chart showing Q1 was 45000 Q2 was 52000 Q3 was 48000 Q4 was 61000">

<!-- Good -->
<img src="chart.png" alt="Bar chart showing quarterly revenue for 2025, with a strong increase in Q4 reaching $61,000">

<!-- Even better: summarize in alt, provide data table for details -->
<img src="chart.png" alt="Quarterly revenue chart showing growth throughout 2025, with Q4 as the strongest quarter">
<!-- Follow with a data table for full details -->

Icons

Icons fall into two camps. If the icon is next to text that already describes it (like a phone icon next to a phone number), the icon is decorative and should have empty alt text. If the icon is the only element conveying meaning (like a standalone envelope icon that opens email), it needs alt text describing the function.

<!-- Icon next to text: decorative, use empty alt -->
<img src="phone-icon.svg" alt=""> (555) 123-4567

<!-- Standalone icon link: needs descriptive alt -->
<a href="mailto:[email protected]">
  <img src="envelope-icon.svg" alt="Send us an email">
</a>

<!-- Even better: use CSS for decorative icons, keep them out of the DOM entirely -->

Logos

If a logo links to the homepage, the alt text should be the company name, not "logo." Screen reader users don't need to know it's a logo. They need to know what it does.

<!-- Bad -->
<a href="/"><img src="logo.png" alt="logo"></a>

<!-- Bad -->
<a href="/"><img src="logo.png" alt="Acme Corp red and blue logo with tagline"></a>

<!-- Good -->
<a href="/"><img src="logo.png" alt="Acme Corp home page"></a>

<!-- Also fine -->
<a href="/"><img src="logo.png" alt="Acme Corp"></a>

Screenshots

For screenshots in tutorials or documentation, describe what the screenshot shows in the context of your instructions. Focus on the relevant part of the screen, not every pixel.

<!-- Bad -->
<img src="settings.png" alt="screenshot">

<!-- Good -->
<img src="settings.png" alt="WordPress media library showing the alt text field highlighted in the attachment details panel">

If you use WordPress, the media library makes it straightforward to add alt text when you upload images. The field is right there in the attachment details. The challenge is just building the habit of filling it in every time.

Common Alt Text Mistakes

Even people who understand the basics of alt text make these errors. I see them in scan reports constantly. Here are the patterns to avoid.

"Image of..." and "Photo of..."

Screen readers already announce that an element is an image before reading the alt text. So writing "Image of a golden retriever playing fetch" makes the screen reader say: "Image. Image of a golden retriever playing fetch." That's redundant. Just write "Golden retriever playing fetch in a park."

<!-- Bad: redundant "image of" -->
<img alt="Image of a sunset over the ocean">

<!-- Good: skip the prefix -->
<img alt="Sunset over the Pacific Ocean with orange and pink clouds">

The one exception: if the image type is relevant, such as "oil painting of a sunset" or "aerial photograph of downtown Chicago." In those cases, the medium itself is meaningful information.

Filenames as Alt Text

Some content management systems auto-populate the alt text with the filename when you upload an image. So you end up with alt="DSC_4723.jpg" or alt="hero-banner-final-v2-REVISED.png". This is worse than no alt text at all, because it forces screen reader users to listen to meaningless strings of characters. Always replace auto-generated alt text with something meaningful.

Alt Text That's Way Too Long

Alt text should be concise. A good target is one to two sentences, roughly 125 characters or fewer. Screen readers read alt text as a single block without pausing, so a paragraph of text becomes an exhausting wall of words. If you need more detail than a sentence or two can provide (like for a complex infographic), use the alt text for a brief summary and provide the full description in the surrounding text or via a linked long description.

<!-- Too long -->
<img alt="A photograph taken on January 15, 2026 at our annual company retreat in Aspen, Colorado showing the entire marketing team of 12 people standing in front of the lodge with snow-covered mountains in the background. From left to right: John Smith wearing a red jacket, Maria Garcia in a blue coat...">

<!-- Just right -->
<img alt="The marketing team at the 2026 company retreat in Aspen, Colorado">

Alt Text That's Too Vague

On the flip side, alt text like "image" or "photo" or "graphic" tells the user nothing. Even generic descriptions like "people" or "building" are usually too vague. Try to answer: what specifically is this image communicating in this context?

<!-- Too vague -->
<img alt="graph">

<!-- Much better -->
<img alt="Line graph showing a 40% increase in website traffic after accessibility improvements">

These are some of the most common WCAG mistakes I encounter across sites of all sizes.

Keyword Stuffing

Some SEO advice from the early 2000s suggested cramming keywords into alt text. Don't do this. Writing alt="best cheap running shoes buy running shoes online discount running shoes free shipping" is bad for screen reader users and won't help your SEO either. Modern search engines are smart enough to penalize keyword stuffing. Write alt text for humans first.

Alt Text for E-Commerce Product Images

Product images deserve special attention because they directly affect purchasing decisions. Someone using a screen reader should get enough information from the alt text to decide whether this is the product they want.

Include: the product name, brand (if relevant), color, size or variant shown, and any distinctive features visible in the image.

<!-- Bad -->
<img alt="shoe">

<!-- Bad -->
<img alt="product image">

<!-- Good: main product image -->
<img alt="Nike Air Max 90 in white and university red, men's size, side view">

<!-- Good: alternate angle -->
<img alt="Nike Air Max 90 sole pattern showing tread detail">

<!-- Good: product in use -->
<img alt="Runner wearing Nike Air Max 90 on a forest trail">

For products with multiple images, vary the alt text to describe what each image specifically shows. The main image might be a front view, the second might show the product from behind, the third might show it in use. Each one should have alt text that reflects its unique angle or context.

If you're managing a large catalog, it helps to create a template for your product alt text. Something like: "[Brand] [Product Name] in [Color/Variant], [view angle or context]." This keeps things consistent and makes it easier for your content team to fill in alt text without overthinking it.

When to Use Empty Alt Text

Empty alt text (alt="") is not the same as missing alt text (no alt attribute at all). This distinction matters.

When you write alt="", you're telling screen readers: "This image is decorative. Skip it." The screen reader will ignore the image completely, which is exactly what you want for images that don't add information.

When you omit the alt attribute entirely, screen readers don't know what to do. Many will read the filename, the URL, or just say "image" with no context. That's a terrible experience.

<!-- Decorative image: use empty alt -->
<img src="decorative-divider.svg" alt="">

<!-- Missing alt attribute entirely: DON'T do this -->
<img src="decorative-divider.svg">

Use empty alt text for:

• Decorative borders, dividers, and background textures
• Icons that are next to text that already conveys the same meaning
• Purely aesthetic images (abstract patterns, spacer images)
• Thumbnails that link to the same destination as adjacent text links (to avoid the screen reader announcing the link twice)

A useful test: cover the image with your hand and read the page. If you don't miss anything, the image is decorative and should have alt="".

Alt Text for Social Media

Most social media platforms now support alt text, and you should use it. The same principles apply: describe what's in the image in a way that conveys the key information to someone who can't see it.

Twitter/X: When composing a tweet with an image, click "Add description" below the image. You get 1,000 characters, which is plenty. Focus on what the image adds to your tweet that the text alone doesn't cover.

Instagram: Go to Advanced Settings before posting and find the "Write alt text" option. Instagram auto-generates alt text, but it's generic and often wrong. Write your own.

Facebook: Click "Edit" on your photo after uploading and look for the alt text field. Facebook also auto-generates descriptions, but they're unreliable.

LinkedIn: When adding an image to a post, look for the "Alt text" button. Same rules apply: describe the meaningful content of the image.

Here's the thing about social media alt text that people often miss. Your followers who use screen readers are real people who chose to follow you. They want to engage with your content. When you post an image without alt text, you're essentially telling those followers: "This post isn't for you." That's not the message you want to send.

Testing Your Alt Text with Screen Readers

The best way to know if your alt text works is to hear it read aloud. You don't need to become a screen reader expert. Even five minutes of testing will give you a much better feel for what works and what doesn't.

Quick Testing with VoiceOver (Mac)

Press Cmd + F5 to turn on VoiceOver. Use Ctrl + Option + Right Arrow to move through elements on the page. When VoiceOver hits an image, it will say "image" followed by the alt text. Listen to how it sounds. Does it give you enough context? Is it too long? Does it make sense without seeing the image?

Quick Testing with NVDA (Windows)

Download NVDA (it's free). Press Insert + Down Arrow to start reading. Use the Tab key to jump between interactive elements or G to jump between images. Listen to how your alt text is announced.

The "Phone a Friend" Test

If you don't have a screen reader handy, try this: call a friend and describe the image to them over the phone. Whatever you say is probably close to what your alt text should be. If you find yourself going on for more than two sentences, you're being too detailed. If your friend says "OK, but what does it look like?" you're being too vague.

For a deeper guide on screen reader testing, including keyboard shortcuts and common pitfalls, check out our screen reader testing guide.

You can also run a scan on your site to automatically flag every image that's missing alt text. Our scanner catches missing alt attributes, empty alt on informational images, and other image accessibility issues.

Quick Reference Cheat Sheet

Keep this handy next time you're adding images to your site.

Image Type	Alt Text Approach	Example
Photo of a person	Name and relevant context	alt="Dr. Lisa Park presenting at the 2026 UX conference"
Product image	Brand, product, color, variant	alt="Patagonia Better Sweater in navy blue, front view"
Chart or graph	Summarize the key takeaway	alt="Bar chart showing 60% of users prefer dark mode"
Screenshot	Describe the relevant part of the screen	alt="Accessibility settings panel with high contrast mode enabled"
Logo (linked)	Company name + destination	alt="Acme Corp home page"
Icon with adjacent text	Empty alt (decorative)	alt=""
Standalone icon link	Describe the action	alt="Open navigation menu"
Decorative image	Empty alt	alt=""
Complex infographic	Brief summary + link to full description	alt="Infographic: 10 steps to accessible web design. Full text below."

The Golden Rules

1. Be specific, be brief. One to two sentences. Around 125 characters is a good target.
2. Don't start with "Image of" or "Photo of." The screen reader already announces it's an image.
3. Describe function over appearance for linked images and icons.
4. Use empty alt="" for decorative images. Never omit the alt attribute entirely.
5. Think about context. The same image might need different alt text on different pages depending on what point it's supporting.
6. Don't stuff keywords. Write for humans, not search engine bots.
7. Test with a screen reader. Even five minutes of listening will change how you think about alt text.