Image Accessibility & Alt Text: The Complete Guide to Making Images Work for Everyone

Last year I ran an accessibility audit on a client's e-commerce site — 4,200 product images, and exactly zero of them had alt text. Not bad alt text, not placeholder alt text. Nothing. Every single product was invisible to screen reader users, and Google's image search had no idea what any of the photos showed. The site was hemorrhaging traffic and excluding roughly 15% of potential customers.

It took two weeks to fix. But the results were immediate: image search traffic jumped 34% in the first month, and the client received their first-ever positive accessibility review from a disability advocacy group. All from adding a few words to each image tag.

Image accessibility is one of those things that sounds simple — "just add alt text" — but gets surprisingly nuanced when you dig into it. What do you write for a decorative background? How do you describe a complex infographic? What about images that are also links? This guide covers all of it, from the basics to the edge cases that trip up even experienced developers.

Why Image Accessibility Matters More Than You Think

Let's start with the numbers, because they're staggering. The World Health Organization estimates that 2.2 billion people globally have some form of vision impairment. Of those, 285 million are moderately to severely visually impaired, and 39 million are completely blind. These aren't edge cases — they represent a massive segment of your potential audience.

Screen readers — software that converts on-screen content to speech or Braille — are the primary way blind and visually impaired people navigate the web. When a screen reader encounters an image, it looks for the alt attribute. If it finds descriptive text, it reads it aloud. If it finds an empty alt="", it skips the image silently. If the alt attribute is missing entirely, most screen readers will read the file name instead — which means your users hear something like "image, DSC underscore zero four seven three dot JPEG" or "image, hero dash banner dash final dash v2 dot PNG." That experience is not just unhelpful; it's actively hostile.

Beyond screen readers, alt text serves as a fallback when images fail to load — which happens more often than you'd think. Slow connections, corporate firewalls blocking external domains, broken CDN links, and email clients that block images by default all result in blank spaces where your content should be. Good alt text keeps the page meaningful even when every image is missing.

And then there's SEO. Google's image search processes over 1 billion searches per day. Google cannot "see" images the way humans do — it relies heavily on alt text, surrounding context, and file names to understand what an image contains. Pages with well-written alt text consistently outperform those without in both regular search results and Google Image Search rankings. I've seen image SEO improvements of 25-40% simply by adding descriptive alt text to existing content.

How Screen Readers Actually Handle Images

Understanding how screen readers process images helps you write better alt text. Here's what happens under the hood with the three most common screen readers:

NVDA (Windows, free) announces "graphic" followed by the alt text. If no alt text exists, it reads the image file name. If the image is inside a link, it announces "link, graphic" followed by the alt text — so link images need alt text that describes the link destination, not just the image content.

VoiceOver (macOS/iOS, built-in) says "image" then the alt text. On iOS, it also supports image recognition — if no alt text exists, VoiceOver attempts to describe the image using AI, but the results are often vague ("possibly a person outdoors") and unreliable for conveying meaning.

JAWS (Windows, commercial) says "graphic" then the alt text. JAWS offers a "graphics off" mode that replaces all images with their alt text, which is useful for low-vision users who prefer text-only layouts.

The key insight: screen readers already announce that something is an image. Starting your alt text with "Image of" or "Picture of" is redundant — the user will hear "graphic, image of a sunset" which is like saying "a picture of a picture of a sunset." Just describe the content directly.

How to Write Alt Text That Actually Works

Writing good alt text is a skill, and like any skill, it gets easier with practice. Here are the principles I follow after writing alt text for thousands of images across dozens of client sites:

1. Describe What the Image Shows, Not What It Is

Bad: "Photo" or "Company logo" or "Banner image"

Good: "Three team members collaborating around a whiteboard covered in sticky notes"

Great: "Marketing team brainstorming Q3 campaign ideas around a whiteboard in the Chicago office"

The level of detail depends on context. A hero image that sets the mood needs a brief description. A product photo needs precise details about color, size, and features. An instructional screenshot needs enough detail to follow the tutorial without seeing the image.

2. Keep It Concise but Complete

Most screen reader users can interrupt alt text and move on, so length isn't a hard constraint. However, 125 characters is a good target for most images — that's about 20-25 words. Some older screen readers truncate at 125 characters, and keeping descriptions concise respects the user's time.

For complex images that need longer descriptions (infographics, diagrams, detailed product photos), use aria-describedby to link to a longer text description while keeping the alt text as a brief summary.

3. Include Context and Purpose

The same image can need different alt text depending on where it appears. A photo of a Golden Retriever might be:

• On a breed guide: "Adult Golden Retriever with light gold coat, showing the breed's characteristic feathered fur and friendly expression"
• On a veterinary article about hip dysplasia: "Golden Retriever standing with visible rear leg joint alignment for hip assessment"
• On a pet adoption page: "Max, a 3-year-old Golden Retriever available for adoption — house-trained, good with children"

Context determines relevance. Ask yourself: "If I removed this image, what information would be lost?" Your alt text should replace that information.

4. Don't Stuff Keywords

It's tempting to turn alt text into a keyword list for SEO. Don't. "Best dog food premium organic grain-free healthy puppy kibble 2026" is terrible alt text — it doesn't describe an image, it reads like spam, and Google's algorithms are sophisticated enough to detect and penalize keyword stuffing in alt attributes.

Include one or two relevant keywords naturally where they genuinely describe the image. "Bowl of organic grain-free dog food with chicken and vegetables" is both accurate alt text and good for SEO. You can write alt text that serves both purposes without compromising either.

5. Handle Text in Images Carefully

If an image contains readable text — a quote graphic, an infographic title, a button screenshot — include that text in the alt attribute. A motivational quote image needs alt text like: "Quote: The only way to do great work is to love what you do — Steve Jobs." Without this, screen reader users miss the actual content.

Better yet, avoid images of text whenever possible. Use styled HTML text instead — it's accessible by default, scalable, translatable, and searchable. WCAG 2.1 explicitly recommends this in Success Criterion 1.4.5.

The Decision Flowchart: What Alt Text Does This Image Need?

Not every image needs the same treatment. Here's the decision tree I use:

Common Alt Text Mistakes (And How to Fix Them)

I've audited hundreds of websites for accessibility, and these mistakes appear on almost every one:

Mistake 1: Missing Alt Attribute Entirely

This is the worst offense. Without any alt attribute, screen readers read the file name, which is almost always gibberish. Even an empty alt="" is better than a missing one — at least the screen reader skips it gracefully.

The fix: Run an automated scan with axe DevTools or WAVE. Both flag images with missing alt attributes instantly. Fixing this across a site takes hours, not days, and has an immediate impact.

Mistake 2: Generic Alt Text on Every Image

Using "image" or "photo" or "img1234" as alt text is barely better than nothing. I once audited a photography portfolio where every single image had alt="photo". A screen reader user would hear "graphic, photo" repeated 47 times with no way to distinguish between images.

The fix: Write unique, descriptive alt text for each image. Yes, it takes time. No, there's no shortcut that doesn't compromise quality. AI-generated alt text can provide a starting point but always needs human review.

Mistake 3: Starting With "Image of" or "Picture of"

Screen readers already announce "graphic" before reading alt text. Prefixing with "Image of" creates redundancy. Write alt="Sunset over the Pacific Ocean" instead of alt="Image of a sunset over the Pacific Ocean."

Exception: "Screenshot of" can be useful when the image type provides context, like in a tutorial: alt="Screenshot of the WordPress media library upload dialog"

Mistake 4: Using Alt Text for Decorative Images

A decorative border, a gradient background, a visual separator — these don't convey information. Giving them alt text clutters the screen reader experience. Every unnecessary description is another interruption for users who are trying to navigate your content efficiently.

The fix: Use alt="" for decorative images, or even better, implement them as CSS backgrounds instead of HTML images.

Mistake 5: Identical Alt Text for Different Images

Product listings often use the same alt text for every product image variant: "Blue sneaker, Blue sneaker, Blue sneaker, Blue sneaker." Each image should describe its unique perspective: "Blue sneaker front view," "Blue sneaker side profile showing tread pattern," "Blue sneaker close-up of heel cushioning."

Alt Text for Different Content Types

E-commerce Product Images

Product images are where alt text directly impacts revenue. Include the product name, color, material, and any distinguishing features. Be specific enough that someone could make a purchase decision from the description alone.

Good: alt="Nike Air Max 90 in white leather with black swoosh, men's size range, side profile view"

Bad: alt="Shoe" or alt="Nike shoe product image"

For product photography, each angle should have unique alt text describing what that specific view reveals about the product.

Blog and Article Images

Blog images typically support the surrounding text. The alt text should capture what the image adds beyond the written content. If the image illustrates a concept already explained in text, a brief description suffices. If the image contains unique information (a screenshot with specific settings, a comparison photo), describe that information fully.

When optimizing blog images for performance, don't forget that alt text is part of the optimization — it makes your images discoverable in Google Image Search and improves overall page accessibility.

Social Media and Shared Images

Most social platforms now support alt text for uploaded images. Twitter/X, Instagram, Facebook, and LinkedIn all have alt text fields — but they're optional and hidden behind extra taps, so most people never use them. Adding alt text to social media images is one of the simplest ways to make your social presence more inclusive.

When sharing images across platforms, ensure your social media images are properly sized and include alt text on every platform that supports it.

Screenshots and Tutorials

Tutorial screenshots need more detailed alt text than most images because the visual content IS the instruction. Describe what the user should see: menu paths, button labels, dialog content, and highlighted elements. "Screenshot of Chrome DevTools showing the Network tab with image requests filtered" is far more useful than "DevTools screenshot."

For tips on capturing and sharing high-quality screenshots, check out our screenshot workflow guide.

WCAG Compliance: What the Law Actually Requires

Web Content Accessibility Guidelines (WCAG) aren't just best practices — in many jurisdictions, they're legal requirements. Here's what you need to know:

WCAG 2.1 Level AA Requirements for Images

• Success Criterion 1.1.1 (Non-text Content): All non-text content must have a text alternative that serves the equivalent purpose. This is Level A — the bare minimum.
• Success Criterion 1.4.5 (Images of Text): Don't use images of text when the same visual effect can be achieved with styled text. Exceptions include logos and situations where a specific visual presentation is essential.
• Success Criterion 1.4.9 (Images of Text — No Exception): Level AAA goes further — images of text should only be used for pure decoration or where a specific presentation is essential to the information.

Legal Landscape in 2026

The Americans with Disabilities Act (ADA) has been interpreted by courts to apply to websites, and WCAG 2.1 Level AA is the de facto standard. The European Accessibility Act (EAA) takes full effect in June 2025, requiring WCAG compliance for products and services sold in the EU. Similar legislation exists in Canada (AODA), Australia (DDA), and the UK (Equality Act).

Accessibility lawsuits in the US exceeded 4,600 in 2025, with missing alt text being the most commonly cited violation. This isn't theoretical — real businesses face real consequences for inaccessible images.

CMS-Specific Implementation Guide

Here's how to add alt text in the most popular content management systems:

WordPress

When uploading an image in the Media Library, the "Alt Text" field is in the right panel. For existing images, go to Media → Library, click an image, and fill in the "Alternative Text" field. WordPress uses this value in the alt attribute whenever the image is inserted into content. The Yoast SEO plugin will remind you when images are missing alt text during content editing.

Shopify

In the product editor, click on any product image and select "Add alt text." For theme images, navigate to Online Store → Themes → Customize and look for the image alt text field when editing image sections. Shopify also supports alt text in collection images, blog post featured images, and slideshow banners.

Squarespace

Click on any image block, then click the pencil icon → Design tab. The "Image alt text" field is near the bottom. For gallery images, edit each image individually within the gallery block. Squarespace automatically uses the image filename as a fallback, which is better than nothing but far from ideal.

Custom HTML / React

In plain HTML, always include the alt attribute: <img src="photo.jpg" alt="Description here">. In React/JSX, use the same syntax. For Next.js, the <Image> component requires the alt prop — it will warn you during development if it's missing. Set up ESLint with the jsx-a11y plugin to catch missing alt text during development.

Tools for Auditing Image Accessibility

You don't have to check every image manually. These tools automate the process:

I recommend running axe DevTools or WAVE on every page as a starting point. For ongoing monitoring, integrate Pa11y into your CI/CD pipeline so missing alt text gets caught before deployment, not after.

AI-Generated Alt Text: Promise and Limitations

AI image description tools have improved dramatically. Microsoft's Azure Computer Vision, Google Cloud Vision, and open-source models like BLIP-2 can generate alt text automatically. Some CMS plugins (like Microsoft's WordPress AI alt text plugin) integrate this directly into the upload workflow.

But AI-generated alt text has consistent weaknesses:

• No context awareness. AI describes what it sees, not why it matters. It might generate "a person holding a phone" when the context requires "customer using the ImgShare mobile upload feature."
• Demographic descriptions. AI may describe perceived race, gender, or age in ways that are inappropriate, inaccurate, or uncomfortable. Most guidelines recommend avoiding demographic descriptions unless directly relevant.
• Brand blindness. AI doesn't know your products, your team members, or your brand terminology. "A red box on a shelf" might need to be "FireTV Stick retail packaging on a Best Buy display shelf."
• Hallucinations. AI occasionally describes things that aren't in the image, especially in complex scenes with many elements.

My recommendation: use AI as a first draft, then edit. AI can process hundreds of images quickly and give you a starting point that's 60-70% there. Human review catches context issues, brand terminology, and the nuances that AI misses. This hybrid approach is 3-4x faster than writing everything from scratch.

Beyond Alt Text: Advanced Image Accessibility

Figure and Figcaption Elements

HTML5's <figure> and <figcaption> elements create a semantic relationship between an image and its caption. Screen readers announce the caption as part of the image context. Use <figcaption> for visible captions and keep the alt attribute for the image description — they serve different purposes.

ARIA for Complex Images

When an image needs a longer description than alt text can comfortably hold, use aria-describedby to link to a detailed text alternative elsewhere on the page. This keeps the alt text brief while providing full information for users who need it.

SVG Accessibility

SVGs need special treatment. Add a <title> element as the first child of the <svg> for a brief description, and optionally a <desc> element for longer descriptions. Link them with aria-labelledby pointing to the title and desc IDs. Without these, SVGs are completely invisible to screen readers.

Color and Contrast Considerations

Images that convey information through color alone are inaccessible to colorblind users (8% of men, 0.5% of women). Charts should use patterns or labels in addition to colors. Icons that change color to indicate state should also change shape. Ensure any text overlaid on images meets the WCAG contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

The Business Case for Image Accessibility

Accessibility isn't just the right thing to do — it's good business:

• SEO improvement: Google Image Search drives 20-25% of all Google searches. Proper alt text makes your images findable. I've consistently seen 25-40% increases in image search traffic after comprehensive alt text implementation.
• Market expansion: The 1 billion+ people with disabilities represent $13 trillion in annual disposable income globally. Making your site accessible opens this market.
• Legal protection: Proactive accessibility compliance prevents lawsuits. Remediation after a lawsuit costs 3-5x more than building accessibly from the start.
• Better UX for everyone: Alt text helps users on slow connections, users who browse with images off (data saving mode), and anyone who needs to understand an image without seeing it. Think of choosing the right image format — accessibility is another dimension of making images work well everywhere.
• Brand reputation: Companies known for accessibility attract positive attention, talent, and customer loyalty from both disabled and non-disabled consumers.

Your Image Accessibility Checklist

Here's the checklist I use for every project. Print it, bookmark it, tape it to your monitor:

1. Every <img> has an alt attribute — no exceptions, even if it's alt="".
2. Informative images have descriptive, context-appropriate alt text under 125 characters.
3. Decorative images use alt="" or are implemented as CSS backgrounds.
4. Linked images describe the link destination, not just the image content.
5. Complex images have extended descriptions via aria-describedby or adjacent text.
6. Images of text are avoided in favor of styled HTML text wherever possible.
7. SVGs include <title> and <desc> elements with aria-labelledby.
8. Color is never the sole information carrier in charts, icons, or status indicators.
9. Alt text is unique per image — no copy-paste duplicates across product variants.
10. Automated scanning runs regularly (axe, WAVE, or Lighthouse in CI/CD).

Image accessibility isn't a one-time project — it's a practice. Build it into your content creation workflow so every new image gets proper alt text from the start. When uploading images to services like ImgShare, think about what description you'd want someone to hear if they couldn't see the image. That empathy, turned into a few words in an alt attribute, makes the internet work for everyone.