How Do I Write Accessible Alt Text? Best Practices for Image Descriptions

Alt text is the most common accessibility issue on the web. According to WebAIM's analysis of the top million home pages, missing alternative text for images is found on over 50% of sites. It's also one of the easiest issues to fix—once you understand what good alt text actually looks like.

I've reviewed thousands of images during accessibility audits, and the patterns are clear: most alt text is either missing entirely, meaninglessly vague ("image"), or stuffed with keywords that help no one. Writing effective alt text is a skill, but it's learnable. This guide will teach you how to write alt text that actually serves users.

Q: How do I write accessible alt text?

A: Good alt text describes the meaningful content or function of an image in context. Be specific but concise (typically 125 characters or fewer). Describe what matters for understanding the content—not just what the image shows, but what it communicates. For decorative images, use empty alt text (alt=""). For functional images like buttons, describe the action, not the image.

What Alt Text Is and Why It Matters

The Purpose of Alt Text

Alt text (alternative text) provides a text equivalent for images. It serves several purposes:

Screen reader users hear alt text read aloud when they encounter images. Without it, they hear nothing meaningful—often just the filename ("IMG_4592.jpg").

Users with slow connections may see alt text before images load.

Search engines use alt text to understand image content, making it valuable for SEO.

Users who can't see images for any reason (visual impairment, broken image, text-only browsers) get the information images would provide.

The WCAG Requirement

WCAG Success Criterion 1.1.1 Non-text Content requires that all non-text content has a text alternative that serves the equivalent purpose. This is a Level A requirement—the most essential level of accessibility.

This criterion applies to images, icons, charts, diagrams, and any visual content that conveys information.

Types of Images and How to Handle Them

Informative Images

Informative images convey content essential to understanding the page. They require descriptive alt text.

Example: A photo in a news article showing damage from a storm.

Good alt text: "Fallen trees blocking Main Street after Tuesday's windstorm"

Poor alt text: "Storm damage" (too vague), "Photo" (meaningless), or missing entirely

Functional Images

Functional images perform actions—buttons, links, form controls. Alt text should describe the function, not the image.

Example: A magnifying glass icon that activates search.

Good alt text: "Search"

Poor alt text: "Magnifying glass" (describes appearance, not function)

Example: Company logo that links to homepage.

Good alt text: "Acme Corp home"

Poor alt text: "Logo" (doesn't explain where the link goes)

Decorative Images

Decorative images add visual interest but don't convey content. They should have empty alt text (alt="").

Examples:

• Decorative borders or dividers
• Background patterns
• Purely aesthetic illustrations
• Icons that duplicate adjacent text

Why empty alt matters: Empty alt (alt="") tells screen readers to skip the image. Missing alt causes screen readers to announce the filename or image role, creating noise.

<!-- Correct for decorative images -->
<img src="decorative-swirl.png" alt="">

<!-- Wrong - screen reader announces "graphic" or filename -->
<img src="decorative-swirl.png">

Complex Images

Charts, graphs, diagrams, and infographics often convey more information than brief alt text can communicate.

Approach:

1. Provide brief alt text summarizing the image's purpose
2. Provide detailed description elsewhere (caption, adjacent text, linked page)
3. Use aria-describedby or longdesc to connect detailed description

Example for a chart:

<figure>
  <img src="sales-chart.png"
       alt="Bar chart showing quarterly sales, Q4 highest at $2.4M">
  <figcaption>
    Quarterly sales for 2024: Q1 $1.2M, Q2 $1.8M, Q3 $1.6M, Q4 $2.4M.
    See data table below for complete details.
  </figcaption>
</figure>

Images of Text

Images containing text should generally be avoided—use actual text instead. When images of text are necessary (logos, stylized headings), alt text should include the text content.

Example: An image showing "50% OFF SALE"

Alt text: "50% off sale"

Writing Effective Alt Text

The Key Principle: Context Matters

The same image might need different alt text depending on context. Consider what information the image conveys in its specific location.

Example: A photo of a golden retriever.

• On a pet adoption page: "Max, a 3-year-old golden retriever available for adoption"
• In an article about dog breeds: "Golden retriever showing characteristic golden coat and friendly expression"
• As decorative element on a veterinary website: alt="" (decorative)

Ask yourself: "If I replaced this image with text, what text would convey the same information?"

Be Specific and Concise

Specific beats generic. "Two children building a sandcastle on a sunny beach" is better than "Children playing."

Concise beats exhaustive. You don't need to describe every detail—focus on what matters for understanding content.

General guideline: Keep alt text under 125 characters when possible. Screen readers handle longer text, but brevity respects users' time.

Don't Start with "Image of" or "Picture of"

Screen readers already announce that something is an image. Starting alt text with "image of" creates redundancy: "Image, image of a dog."

Write: "Golden retriever catching a frisbee" Not: "Image of a golden retriever catching a frisbee"

Exception: If the fact that something is specifically a photograph, painting, or screenshot matters to the content, you can note it: "1920s photograph of downtown Chicago."

Include Relevant Details

What details matter depends on context:

For people: Name them if known and relevant. Note relevant characteristics if the image's point relates to them (expression, action, relationship to each other).

For places: Name locations if relevant. Include details that matter for understanding.

For objects: Describe relevant characteristics—color, condition, position, relationship to other objects.

For actions: Describe what's happening, not just what's visible.

Avoid Keyword Stuffing

Alt text exists for accessibility, not SEO manipulation. Keyword-stuffed alt text:

• Annoys screen reader users
• Often triggers search engine penalties
• Doesn't actually improve rankings for most sites

Bad: "affordable blue running shoes best running shoes buy running shoes online discount running shoes Nike Adidas"

Good: "Blue Nike Air Zoom running shoes"

Common Alt Text Mistakes

Mistake 1: Missing Alt Text Entirely

The most common problem. Every <img> needs an alt attribute—even if it's empty for decorative images.

<!-- Wrong: no alt attribute -->
<img src="product.jpg">

<!-- Correct: has alt attribute -->
<img src="product.jpg" alt="Red ceramic coffee mug with 'World's Best Dad' text">

Mistake 2: Useless Alt Text

Alt text that doesn't help users understand content:

• "Image"
• "Photo"
• "Picture.jpg"
• "DSC00234.jpg"
• "1"
• "Untitled"

These provide no information and waste users' time.

Mistake 3: Over-Description

Excessively long alt text that describes irrelevant details:

"A photograph taken with a Canon DSLR showing a brown wooden table with a white ceramic mug sitting on a blue coaster, steam rising from the coffee inside, with soft morning light coming through a window to the left and a blurred bookshelf visible in the background."

This might be appropriate for photography criticism; it's excessive for an image accompanying an article about morning routines.

Mistake 4: Redundant Alt Text

Repeating information already present in adjacent text:

Text: "Our CEO, Jane Smith, speaking at the 2024 conference." Adjacent image alt: "Jane Smith speaking at the 2024 conference"

This creates redundancy. Better: "Jane Smith at podium, addressing audience" (adds visual information) or alt="" if the image is purely illustrative.

Mistake 5: Wrong Alt Text for Decorative Images

Giving decorative images descriptive alt text adds noise for screen reader users.

If an image doesn't add information beyond what's already in the text, use alt="".

Alt Text for Specific Contexts

E-Commerce Product Images

Product images need alt text that helps users understand what they're considering buying.

Include:

• Product name/type
• Key visual characteristics (color, pattern, style)
• Distinguishing features visible in the image

Example: "Women's navy blue v-neck cashmere sweater, front view"

For multiple images of the same product: "Navy cashmere sweater, back view" "Navy cashmere sweater, close-up of ribbed cuffs"

Headshots and Team Photos

For identified individuals: "Sarah Johnson, Director of Marketing"

For group photos: "Marketing team at annual retreat, left to right: Sarah Johnson, Mike Chen, Ana Garcia"

Consider context: On a leadership page, names matter. On a "company culture" page, "Employees collaborating in open office" might be more appropriate.

Charts and Data Visualizations

Brief alt text: Summarize the key takeaway Extended description: Provide data details elsewhere

"Line graph showing website traffic increasing 40% from January to December 2024. See data table below."

For complex visualizations, consider whether the visualization is the best way to present information accessibly. Sometimes structured data tables serve all users better.

Icons

Functional icons (alone): Describe the function

• Search icon button: "Search"
• Close button: "Close"
• Download icon: "Download"

Icons with adjacent text: Usually decorative, use alt=""

• ✉️ Contact Us → Icon is decorative; "Contact Us" text provides meaning

Informational icons: Describe the information

• Warning icon: "Warning" or describe what it warns about

Testing Your Alt Text

Manual Review

Read your alt text and ask:

• Does this convey the same information as the image?
• Would this make sense if the image didn't load?
• Is this the right level of detail for the context?

Screen Reader Testing

Listen to your page with a screen reader (VoiceOver, NVDA, or other free options). Does the alt text make sense when you hear it? Does it flow naturally with surrounding content?

Automated Scanning

Automated tools can identify missing alt text but can't evaluate whether alt text is meaningful. Use scanning to find missing alt, then manually review what's present.

TestParty identifies missing and potentially problematic alt text, helping you catch issues efficiently.

FAQ Section

Q: How long should alt text be?

A: There's no strict limit, but 125 characters is a common guideline for concise descriptions. Screen readers handle longer text, but brevity respects users' time. For complex images needing detailed description, provide a short alt text plus extended description through other means (caption, adjacent text, linked description).

Q: Should I include alt text for background images?

A: CSS background images can't have alt text directly. If a background image conveys important information, that information should be available elsewhere in the content. Decorative background images need no alternative.

Q: What about AI-generated alt text?

A: AI can generate alt text but often misses context—what matters about the image in its specific location. AI-generated alt text is better than nothing but should be reviewed and edited by humans who understand the content's purpose.

Q: Do SVG images need alt text?

A: SVGs need accessible alternatives too. For inline SVG, use <title> and aria-labelledby. For SVG in <img> tags, use alt attribute normally. For decorative SVGs, use aria-hidden="true" or role="presentation".

Q: What if I genuinely can't describe an image?

A: If an image conveys information you can't describe (complex art, user-submitted content without context), provide what description you can and acknowledge limitations. "Abstract artwork" is better than nothing. For user-submitted images, prompt users to provide descriptions.

Making Alt Text Part of Your Process

Effective alt text comes from making it part of content creation, not an afterthought:

Content creators should write alt text when adding images—they understand the context best.

Content management systems should prompt for alt text and flag missing descriptions.

Templates and components should require alt text or explicitly mark images as decorative.

Review processes should check alt text quality, not just presence.

Good alt text is simple in concept but requires consistent attention. The investment pays off in accessibility, SEO, and overall content quality.

Ready to identify missing and problematic alt text across your site? Get a free accessibility scan to find image accessibility issues efficiently.

Related Articles:

• How Do Screen Readers Work?
• Does Website Accessibility Help SEO?
• WCAG 2.2: What's New and How to Comply

Quick note: we used AI to help write this article, and our team reviewed it for accuracy. We're passionate about making the web accessible, but accessibility law can get complicated. If you're making decisions about compliance, definitely loop in a professional who knows your specific situation.