1. What Is Alt Text?
Alt text (short for "alternative text") is a written description that you attach to an image in HTML. It serves as a text replacement when the image cannot be seen — whether because the user is visually impaired, the image fails to load, or the connection is too slow to render it.
In HTML, alt text is added using the alt attribute on the <img> tag:
<img src="puppy.jpg" alt="Golden retriever puppy sitting in a field of daisies" />When a screen reader encounters this image, it announces: "Image: Golden retriever puppy sitting in a field of daisies." Without alt text, the screen reader might read the filename instead — something like "Image: IMG_4523.jpg" — which tells the user nothing useful.
Alt text serves three audiences
♿ People using assistive technology
Approximately 2.2 billion people worldwide have vision impairments (WHO, 2023). Screen readers, refreshable braille displays, and other assistive tools rely on alt text to convey what an image shows. For these users, alt text is the image.
🔍 Search engines
Google, Bing, and other search engines can't "see" images (yet). They rely on alt text to understand what an image depicts and how it relates to the surrounding content. Well-written alt text improves image search rankings and overall SEO.
📱 Users with slow connections
When images fail to load (slow connections, data saver mode, email clients that block images), alt text appears in place of the image. This ensures your message still gets across even when visual content is unavailable.
2. Why Alt Text Matters in 2026
Alt text has always been important for accessibility, but in 2026 the stakes are higher than ever. Three converging forces make alt text a business-critical priority:
The accessibility lawsuit explosion
ADA website lawsuits have surged to record levels. A national investigation by Cox Media Group found more than 15,000 ADA website lawsuits filed in just four years, with 90% coming from just 16 law firms. Missing alt text is the single most commonly cited violation in these complaints.
Consider the cases uncovered in this investigation: a bakery in Gainesville settled for $6,500, a fashion designer spent over $200,000 across three lawsuits, and a Jacksonville steakhouse paid roughly $20,000 in settlement and legal fees. In many of these cases, missing image alt text was listed as a primary violation.
The ADA Title II April 2026 deadline
The DOJ's ADA Title II rule requires state and local governments serving populations of 50,000+ to achieve WCAG 2.1 Level AA compliance by April 24, 2026. WCAG Success Criterion 1.1.1 (Non-text Content) — which requires alt text on images — is one of the Level A criteria that must be met. Government agencies that fail to provide alt text on their websites face federal penalties of up to $75,000 for first violations and $150,000 for subsequent ones.
The global accessibility movement
The European Accessibility Act (EAA) took effect in June 2025, requiring digital accessibility for products and services sold in the EU. Canada's Accessible Canada Act sets deadlines for 2027-2028. Alt text requirements are foundational to every international accessibility standard.
💡 The bottom line
Writing alt text is no longer optional — it's a legal requirement, an SEO best practice, and a fundamental act of digital inclusion. The good news: once you learn the principles, it takes only seconds to write effective alt text for each image.
3. WCAG Requirements for Alt Text
The Web Content Accessibility Guidelines (WCAG) set the technical standard for alt text. Here are the specific criteria that apply:
Success Criterion 1.1.1: Non-text Content (Level A)
"All non-text content that is presented to the user has a text alternative that serves the equivalent purpose."
This is a Level A requirement — the most basic level of conformance. If your website fails this criterion, it cannot claim any level of WCAG compliance.
WCAG 1.1.1 applies to all non-text content: images, icons, buttons, form inputs, CAPTCHAs, audio, video, and embedded objects. Each type has specific requirements.
What WCAG says about different image types
Informative images
Must have alt text that conveys the same information the image communicates visually. The alt text should serve the "equivalent purpose" — if you removed the image and replaced it with the alt text, would the user get the same information?
Decorative images
Must have an empty alt attribute (alt=""). This tells assistive technology to skip the image entirely. Never omit the alt attribute — that's a violation.
Functional images (buttons, links)
Alt text must describe the function, not the appearance. A magnifying glass icon in a search button should have alt="Search", not alt="magnifying glass icon".
Images of text
Alt text must contain the exact same text shown in the image. WCAG also recommends using actual text instead of images of text whenever possible (Success Criterion 1.4.5).
Complex images (charts, graphs, diagrams)
Need both a short alt text summary AND a longer text alternative. The long description can be placed in surrounding text, a linked page, or using aria-describedby.
CAPTCHA images
Must identify the purpose (e.g., alt="Type the characters you see in this image") and provide an alternative form of CAPTCHA (like audio) for users who can't see the image.
⚠️ Critical distinction: empty alt vs. missing alt
✅ alt="" — Correct for decorative images. Screen reader skips it.❌ No alt attribute at all — WCAG violation. Screen reader reads filename.❌ alt=" " — Space in alt text. Some screen readers read "image" or "blank".4. The Alt Text Decision Tree
Not sure what kind of alt text to write? Walk through this decision tree — adapted from the W3C WAI alt decision tree — for any image on your site:
Step 1: Does the image contain text?
Yes, and the text isn't also nearby as real text → Use the image text as your alt text. Example: a banner image with "Summer Sale — 50% Off" should have alt="Summer Sale — 50% Off".
Yes, but the text is already in the page → The image is decorative. Use alt="".
No → Continue to Step 2.
Step 2: Is the image used in a link or button?
Yes → Write alt text describing the destination or action, not the image itself. A shopping cart icon linking to the cart page should have alt="Shopping cart (3 items)".
No → Continue to Step 3.
Step 3: Does the image contribute meaning to the page?
Yes, it's simple (photo, illustration) → Write a brief, descriptive alt text. Keep it under 125 characters.
Yes, it's complex (chart, graph, infographic) → Write a brief summary as alt text AND provide a full text alternative elsewhere on the page.
No, it's purely decorative → Use alt="".
Step 4: Is the image already fully described by adjacent text?
Yes → Use alt="" to avoid redundancy. If a photo of a product is followed by a detailed text description of that product, the image is supplementary.
No → Write descriptive alt text. Focus on what makes the image important in this context.
5. How to Write Great Alt Text (With Examples)
The golden rules
Be specific and descriptive
Describe what's actually in the image, not what you wish was there. "Team photo" vs. "Five engineers standing in front of a whiteboard with architecture diagrams" — the second is useful.
Consider the context
The same image might need different alt text on different pages. A photo of a dog on a veterinary website needs medical context; the same photo on a pet adoption page needs breed and temperament information.
Keep it concise
Aim for 125 characters or fewer. Screen reader users can't skim alt text — they hear every word. Cut filler words and get to the point.
Don't start with "Image of" or "Photo of"
Screen readers already announce that the element is an image. Starting with "Image of" creates redundancy.
Don't stuff keywords
Alt text is for accessibility first, SEO second. Keyword stuffing creates a terrible experience for screen reader users and can actually hurt your search rankings.
Real-world examples: before and after
❌ Bad: alt="shoe"
Too vague — which shoe? What color? What style?
❌ Bad: alt="nike running shoe men buy online best price shoes athletic footwear"
Keyword stuffing — unusable for screen reader users
✅ Good: alt="Nike Air Zoom Pegasus 41 men's running shoe in black and white, side view"
Specific: brand, model, color, angle — everything a sighted user sees
❌ Bad: alt="team"
❌ Bad: alt="IMG_2847.jpg"
This is what screen readers announce when alt text is missing — a filename
✅ Good: alt="The 12-person RatedWithAI team at our 2026 company retreat, standing on a mountain overlook"
❌ Bad: alt="banner"
✅ Good (if it conveys info): alt="Woman using a screen reader on a laptop at a coffee shop"
✅ Good (if purely decorative): alt="" — and consider using CSS background-image instead
❌ Bad: alt="chart"
❌ Bad: alt="revenue chart January 50000 February 55000 March 62000 April 71000 May 83000 June 100000..."
Too long for alt text — this data belongs in a table
✅ Good: alt="Line chart showing monthly revenue doubling from $50K to $100K between January and June 2026. Full data in table below."
Summarizes the key insight and directs to the full data
❌ Bad: alt="logo"
❌ Bad: alt="Click here to go to the homepage"
✅ Good: alt="RatedWithAI home"
Identifies the company and the link destination
❌ Bad: alt="icon"
✅ Good: alt="Follow us on Instagram"
Describes the action, not the icon shape
❌ Bad: alt="food"
✅ Good: alt="Margherita pizza with fresh basil, mozzarella, and tomato sauce on a wood-fired crust"
Describes the dish the way a menu would — helps the user decide what to order
6. Alt Text by Image Type
Photographs
Describe who or what is in the photo, what they're doing, and any relevant context. Prioritize details that are important to the surrounding content.
Blog post about remote work: alt="Woman working on a laptop from a balcony overlooking a tropical beach"
Real estate listing: alt="Open-concept kitchen with granite countertops, stainless steel appliances, and a breakfast bar seating four"
Icons and symbols
For icons used as buttons or links, describe the function. For icons used alongside text labels, they're typically decorative and should use alt="".
Standalone search icon (button): alt="Search"
Phone icon next to "Call us: 555-1234": alt="" — the text already provides the information
Infographics
Infographics are complex images that combine data, text, and visuals. They need a two-layer approach:
Layer 1 — alt text: A brief summary of the infographic's main point. alt="Infographic: 5 steps to ADA compliance, from audit to monitoring. Full text below."
Layer 2 — long description: Provide all the information from the infographic as regular text on the page. Use headings, lists, and data tables to structure the content.
Screenshots
Describe what the screenshot shows and why it's relevant. Focus on what the reader needs to see:
Tutorial screenshot: alt="WordPress media library showing the alt text field highlighted in the Attachment Details panel"
Error message screenshot: alt="Browser error message: 'This site can't be reached. ERR_CONNECTION_TIMED_OUT'"
Decorative images
An image is decorative when it doesn't add information that isn't already in the text. Common decorative images include:
- Background patterns and textures
- Divider lines and spacers
- Icons next to text that says the same thing
- Stock photos used only for visual appeal
- Aesthetic illustrations that don't convey content
For decorative images, always use alt="". Better yet, move purely decorative images to CSS using background-image — CSS images are ignored by screen readers by default.
Maps and diagrams
Static map images need alt text describing the location and relevant landmarks. If the map is interactive (like Google Maps embed), ensure keyboard navigation works and provide a text address as a fallback.
alt="Map showing our office location at 123 Main Street, Austin, TX — near the intersection with Congress Avenue"
7. 10 Common Alt Text Mistakes
Even well-intentioned developers and content creators make these mistakes. Here are the most common alt text errors and how to fix them:
1. Missing alt attribute entirely
The most common error. 54.5% of home pages have images with no alt attribute at all (WebAIM Million 2025). This forces screen readers to read the file path or filename.
Fix: Every <img> must have an alt attribute — either with descriptive text or empty (alt="") for decorative images.
2. Using the filename as alt text
alt="DSC_0042.jpg" or alt="hero-banner-v3-final-FINAL.png". This happens when CMS platforms auto-populate the alt field with the filename.
Fix: Always write custom alt text. If using a CMS, check the auto-populated value and replace it.
3. Being too vague
alt="people", alt="building", alt="food". These describe the category but not the content.
Fix: Be specific. "Three chefs preparing sushi at a long counter" is far more useful than "people".
4. Keyword stuffing
alt="best pizza New York pizza delivery order pizza online cheap pizza NYC". This hurts both accessibility and SEO.
Fix: Write for humans first. Natural descriptions that happen to include relevant terms are fine. Stuffing is not.
5. Starting with "Image of" or "Picture of"
Screen readers already say "Image:" before reading the alt text. The user hears "Image: Image of a sunset" — redundant and annoying.
Fix: Start directly with the description. Exception: when the medium matters ("Oil painting of...", "Screenshot showing...").
6. Using alt text for decorative images
Writing alt="blue decorative border" for a visual divider forces screen reader users to sit through descriptions of meaningless elements.
Fix: Use alt="" for decorative images, or move them to CSS.
7. Writing alt text that's too long
A 300-word alt text is a paragraph that a screen reader will read without pause. Users can't skip to the middle or skim.
Fix: Keep alt text under 125 characters. For complex images, write a brief summary and provide the full description in regular page text.
8. Using the same alt text for multiple images
Product galleries where every image says alt="Product image". Screen reader users can't distinguish between views.
Fix: Differentiate each image: "Front view", "Side view", "Close-up of stitching detail", "Size chart".
9. Forgetting alt text on form input images
Submit buttons, search icons, and other interactive images within forms often lack alt text, making forms unusable for screen reader users.
Fix: All image-based form controls must have alt text describing their function: alt="Submit", alt="Search".
10. Not updating alt text when images change
Swapping a product photo but keeping the old alt text, or updating a chart without updating the description. This creates a mismatch.
Fix: Whenever you update an image, update the alt text too. Add this to your content workflow checklist.
8. How to Add Alt Text (Platform Guides)
Here's how to add alt text on the most popular platforms:
<!-- Informative image -->
<img src="product.jpg" alt="Blue ceramic coffee mug with handle, 12oz capacity" />
<!-- Decorative image -->
<img src="divider.svg" alt="" />
<!-- Complex image with long description -->
<img src="chart.png" alt="Q1 sales chart showing 40% growth" aria-describedby="chart-desc" />
<div id="chart-desc" class="sr-only">
Detailed description: January $50K, February $60K, March $70K...
</div>Block Editor (Gutenberg): Click on an image block → the alt text field appears in the right sidebar under "Block" → "Alt text (alternative text)". Type your description there.
Media Library: Click any image → the "Alt Text" field appears in the "Attachment Details" panel on the right side. This is the default alt text for every page where the image is used.
Tip: Alt text set in the Block Editor overrides the Media Library default for that specific page. Set a general alt in the library, then customize per-page when context changes.
See our complete WordPress accessibility guide for more details.
Product images: Go to Products → click a product → click the image → "Add alt text" appears below the image. Enter your description and save.
Theme images: Go to Online Store → Themes → Customize → click on image elements → the alt text field is in the image settings panel.
Blog images: In the rich text editor, click an image → select "Edit image" → enter alt text in the field.
See our complete Shopify ADA compliance guide.
Page images: Click on an image in the page editor → click the pencil icon or "Edit" → find the "Image alt text" field under the "Design" tab. Enter your description.
Gallery images: Open the gallery block settings → click on individual images → add alt text in each image's settings panel.
Note: Squarespace does not auto-generate alt text. Every image must be manually described. Template decorative images may need custom code to add empty alt attributes.
See our Squarespace ADA compliance guide.
Adding alt text: Click on an image in the Wix Editor → click "Settings" (gear icon) → find the "What's in the image? Tell Google" field. Despite the SEO-focused label, this sets the alt attribute.
Wix Accessibility Wizard: Wix offers a built-in accessibility checker that flags images without alt text. Go to Site → Accessibility → run the wizard to find missing descriptions.
See our Wix ADA compliance guide.
Twitter/X:
When composing a tweet with an image, click the image → select "Add description" → type your alt text (up to 1,000 characters). Enable "Compose image descriptions" in Settings → Accessibility to get reminders.
Instagram:
When posting, go to "Advanced settings" → "Write alt text" at the bottom. Instagram also auto-generates alt text using AI, but human-written descriptions are much more accurate.
Facebook:
Click on a photo → select "Edit" → "Alternative text" → choose "Custom alt text" (Facebook auto-generates by default, but custom is better).
LinkedIn:
When adding an image to a post, click the "Alt text" button that appears on the image preview. Enter your description.
9. AI-Powered Alt Text Tools
AI can help generate alt text at scale, but it's not a replacement for human judgment. Here's a honest assessment of the current tools:
AltText.ai
WordPress plugin availableDedicated AI alt text generator. Processes images through computer vision models and generates descriptions. Integrates with WordPress, Shopify, and custom sites via API. Good starting point, but descriptions tend to be generic without page context.
Microsoft Azure Computer Vision
APIEnterprise-grade image analysis API with "Describe Image" endpoint. Generates captions, tags, and object detection. Good accuracy for common objects, struggles with specialized or contextual content. Powers built-in alt text in Microsoft 365.
WordPress — Flavor Plugin
WordPressWordPress plugin that auto-generates alt text for uploaded images using AI. Scans your media library to find images missing alt text. Free tier available. Good for catching bulk missing alt text on existing sites.
Shopify Built-in AI Alt Text
Shopify nativeShopify Magic now includes AI-generated alt text for product images. Available in the product editor — click "Generate" next to the alt text field. Context-aware since it knows the product title and description. Decent but requires review.
⚠️ Why AI-generated alt text needs human review
- • Context blindness: AI describes what it sees, not why it matters. A photo of a person smiling might be described as "person smiling at camera" when the context requires "CEO Jane Smith announcing the company's IPO at the annual shareholder meeting."
- • Accuracy issues: AI regularly misidentifies objects, counts wrong, and confuses similar items. "Two dogs in a park" might actually be a dog and a cat.
- • Cultural sensitivity: AI may describe people in ways that are reductive, focusing on visible characteristics rather than contextually relevant information.
- • Missed functional context: AI can't determine whether an image is decorative or informative — it will generate descriptions for images that should have
alt="".
Best practice: Use AI to generate a first draft, then review and edit every description for accuracy, context, and conciseness.
10. Alt Text and ADA Lawsuits
Missing alt text is the most frequently cited issue in ADA website lawsuits. Understanding why — and how to protect your business — is critical.
Why alt text is the #1 lawsuit target
Easy to prove
A missing alt attribute is a binary violation — it's either there or it's not. Plaintiff attorneys can run automated scans to identify missing alt text across an entire website in minutes. Unlike subjective accessibility issues, there's no room for interpretation.
Incredibly common
WebAIM's annual accessibility survey consistently finds missing alt text on over 50% of home pages. Plaintiff firms have a near-unlimited supply of targets.
Directly impacts screen reader users
Courts have recognized that missing alt text creates a genuine barrier to access. When a screen reader encounters an image without alt text, the user either hears the filename (confusing) or nothing at all (invisible content).
What ADA complaints say about alt text
Here's an excerpt from a typical ADA website lawsuit complaint:
"The Website has numerous access barriers that deny blind users full and equal access. These barriers include but are not limited to: lack of alternative text (alt-text) on graphics and images, which prevents screen reader users from understanding the content and purpose of such images..."
This language — or something very close to it — appears in thousands of ADA website complaints. Missing alt text is almost always listed first among the accessibility barriers cited.
How to protect your business
Audit your current images. Run a free accessibility scan to identify every image on your site missing alt text. Fix the most visible pages first (homepage, product pages, landing pages).
Add alt text to every image. Use the guidelines in this article. Prioritize product images, menu images, contact information, and any image that conveys information a user needs.
Establish a content workflow. Make alt text a required field in your content creation process. No image gets published without alt text — period.
Monitor continuously. New images are added regularly through CMS updates, user-generated content, and design changes. Automated monitoring catches regressions before they become legal targets.
Document your compliance efforts. Keep records of when alt text was added, audits performed, and remediation completed. This evidence of good faith effort can be valuable if a complaint is filed.
📊 The cost comparison
Adding alt text to your website costs a few hours of work. An ADA website lawsuit costs $5,000-$25,000+ in settlements and legal fees — and you'll still have to fix the alt text afterward. The IRS Disabled Access Credit (Form 8826) even provides up to $5,000 in tax credits for small businesses that invest in accessibility improvements.
11. How to Test Your Alt Text
Writing alt text is only half the job — you also need to verify it's working correctly. Here are the best testing methods:
Automated scanning tools
Automated tools can quickly identify images with missing alt attributes. They can't judge alt text quality, but they'll catch the most common violation.
- • RatedWithAI Scanner — scans your site and flags every image missing alt text
- • WAVE — browser extension that highlights accessibility errors including missing alt text
- • axe DevTools — detailed developer-focused accessibility testing
- • Lighthouse — built into Chrome DevTools, checks for missing alt attributes
See our full comparison of accessibility testing tools.
Screen reader testing
The most authentic test: listen to your site through a screen reader. This reveals whether your alt text actually makes sense in context.
- • NVDA (Windows) — free, open-source screen reader. Press Insert+G to list all images and their alt text.
- • VoiceOver (macOS/iOS) — built into Apple devices. Turn on with Cmd+F5. Navigate images with VO+Right Arrow.
- • JAWS (Windows) — commercial screen reader widely used in enterprise. Insert+G lists graphics.
- • TalkBack (Android) — built into Android devices. Settings → Accessibility → TalkBack.
The "replace" test
Mentally replace each image with its alt text. Does the page still make sense? Does the user get the same information? If removing the image and reading only the alt text gives you the same understanding, your alt text is working.
Browser DevTools inspection
Right-click any image → "Inspect" → check the <img> tag for the alt attribute. Quick way to verify alt text is present and correct on individual images. Also useful for checking third-party widgets and embedded content.
12. Alt Text Checklist
Use this checklist to audit your website's alt text. Print it, bookmark it, or share it with your content team:
13. Frequently Asked Questions
What is alt text and why does it matter for accessibility?
Alt text (alternative text) is a written description added to an image's HTML code that serves as a text replacement when the image cannot be seen. Screen readers read alt text aloud to visually impaired users, search engines use it to understand image content, and browsers display it when images fail to load. Missing alt text is the #1 web accessibility violation — found on 54.5% of all home pages according to WebAIM's 2025 survey.
How long should alt text be?
Aim for 125 characters or fewer. This isn't a hard WCAG requirement, but many screen readers (including JAWS) truncate or change behavior around this length. For complex images like charts or infographics, write a brief summary as the alt text and provide a detailed text alternative nearby on the page.
Should decorative images have alt text?
Decorative images should have an empty alt attribute (alt=""), not a missing alt attribute. An empty alt tells screen readers to skip the image entirely. A missing alt attribute is a WCAG violation — the screen reader may announce the filename, creating a confusing experience.
Do I need alt text for ADA compliance?
Yes. Alt text is required under ADA Title III (private businesses) and Title II (government entities). WCAG 2.1 Level AA requires all non-text content to have a text alternative (Success Criterion 1.1.1). Missing alt text is the most commonly cited violation in ADA website lawsuits, appearing in the majority of complaints.
What is the difference between alt text and a caption?
Alt text is hidden in HTML and accessed by screen readers, search engines, or displayed when images fail to load. Captions (using the <figcaption> element) are visible text displayed below an image for all users. They serve different purposes and can be used together — alt text replaces the image, while captions supplement it.
Can AI generate alt text automatically?
Several AI tools can generate alt text, including Microsoft Azure Computer Vision, WordPress plugins like Flavor and AltText.ai, and built-in features in Shopify. However, AI-generated alt text should always be reviewed by a human — it often misses context, writes generic descriptions, and can make accuracy errors. Use AI as a starting point, then edit for accuracy.
Should I start alt text with "Image of" or "Photo of"?
No. Screen readers already announce that an element is an image before reading the alt text. Starting with "Image of" creates redundancy. Simply describe what the image shows. The exception: when the medium adds context, like "Oil painting of sunflowers by Van Gogh" or "Screenshot of the checkout page."
How do I write alt text for complex images like charts and graphs?
Use a two-layer approach: (1) Write a brief alt text summarizing the key takeaway, and (2) provide a full data table or detailed description elsewhere on the page, linked using aria-describedby. WCAG 1.1.1 requires both a short text alternative and a detailed description for complex images.
Find Every Missing Alt Text on Your Website
Our free accessibility scanner identifies every image on your site that's missing alt text — along with other WCAG violations that could expose you to ADA lawsuits. Get your accessibility score in under 60 seconds.
Scan Your Website Free →Related Articles
Top 10 WCAG Failures (And How to Fix Them)
Missing alt text is #1 — but there are 9 other critical failures you need to know about.
WCAG 2.2 Checklist
Complete checklist for every WCAG 2.2 success criterion, from Level A to AAA.
ADA Compliance Checklist 2026
Step-by-step checklist for making your website ADA compliant this year.
Shopify ADA Compliance Guide 2026
Platform-specific guide to making your Shopify store accessible.
Best Accessibility Testing Tools Compared (2026)
Compare 12 testing tools including free browser extensions and enterprise solutions.
How to Respond to an ADA Demand Letter
Got sued? Here's your emergency 72-hour response checklist.