The 2025 TestParty Guide to WCAG 1.1.1 – Non-text Content (Level A)

Why did the image go to therapy? Because it had an identity crisis—nobody gave it alt text, so screen readers kept saying "image, image, image" instead of its actual purpose!

WCAG 1.1.1 Non-text Content is the foundation of digital accessibility. It requires that every image, icon, chart, button, and visual element on your site has a text alternative that conveys the same information to people who can't see it. This isn't just about slapping alt="" on everything—it's about ensuring blind and low-vision users get an equivalent experience.

Table of Contents

• What WCAG 1.1.1 Requires
• Why This Matters
• Quick Implementation Guide
• Common Mistakes to Avoid
• How to Test for WCAG 1.1.1
• How TestParty Helps
• FAQs

What WCAG 1.1.1 Requires

Every piece of non-text content presented to users must have a text alternative that serves the same purpose. This includes images, icons, charts, graphs, buttons, form inputs, emojis, ASCII art, and embedded objects.

Key exceptions where full equivalence isn't required:

• Controls and inputs: Must have a descriptive name (e.g., a search button needs alt="Search" or aria-label="Search")
• Time-based media: Videos and audio need at least descriptive identification (full transcripts/captions are covered under WCAG 1.2)
• Tests: If showing the answer in text would invalidate the test, provide descriptive identification instead
• Sensory experiences: Content meant to create a specific sensory experience (like a recording of birdsong) needs descriptive identification
• CAPTCHAs: Must identify their purpose and offer alternative sensory modes (audio CAPTCHA, etc.)
• Decorative content: Pure decoration, visual formatting, or invisible content must be hidden from assistive technology

What's affected:

• <img> elements
• <input type="image"> buttons
• <area> elements in image maps
• Background images conveying information
• Icons (font icons, SVG icons)
• Charts, graphs, and data visualizations
• Emojis and ASCII art
• PDF images and figures

Why This Matters

Screen reader users navigate the web through text. When an image lacks alt text, they hear "image" or the filename—"IMG_3847.jpg"—which conveys nothing. A product photo without alt text means a blind shopper can't tell what they're buying. A chart without a text alternative excludes users from critical data.

Legal and compliance context:

WCAG 1.1.1 is Level A—the baseline requirement for ADA Title III compliance, Section 508 federal procurement, EN 301 549 (EU), and the European Accessibility Act. It's cited in thousands of accessibility lawsuits. Failure to provide text alternatives is one of the most common and easily proven violations.

Business impact:

Missing alt text directly harms conversion rates, SEO, and brand reputation. Search engines rely on alt text to understand images. Users with disabilities represent 16% of the global population and $13 trillion in disposable income. Accessible sites rank better, convert better, and face fewer legal risks.

Quick Implementation Guide

For informative images:

Use the alt attribute to describe the content and function. Be concise but complete.

<!-- Good: Describes what the image shows -->
<img src="revenue-chart-2024.png" alt="Bar chart showing 23% revenue growth in Q4 2024">

<!-- Good: Product image with essential details -->
<img src="red-sweater.jpg" alt="Red cable-knit sweater with crew neck">

For functional images (buttons, links):

Describe the action, not the appearance.

<!-- Good: Describes the button's function -->
<button>
  <img src="search-icon.svg" alt="Search">
</button>

<!-- Good: Icon link with clear purpose -->
<a href="/cart">
  <img src="cart.svg" alt="View shopping cart">
</a>

For decorative images:

Use empty alt text (alt="") so screen readers skip them.

<!-- Good: Decorative flourish hidden from assistive tech -->
<img src="decorative-border.png" alt="">

For complex images (charts, diagrams):

Provide a short alt and a longer description nearby or via aria-describedby.

<img src="org-chart.png" alt="Company organizational chart" aria-describedby="org-desc">
<div id="org-desc">
  The chart shows CEO Jane Smith at the top, with three direct reports: 
  CTO John Doe, CFO Maria Garcia, and COO Ahmed Khan...
</div>

Key techniques: H37 (alt attributes), ARIA6 (aria-label), ARIA10 (aria-labelledby), G94 (equivalent text alternatives), H67 (null alt for decorative images).

Common Mistakes to Avoid

Using filenames or placeholder text as alt:

• ❌ alt="IMG_3847.jpg" or alt="image" tells users nothing
• ✅ alt="Golden retriever puppy playing in grass"

Omitting alt entirely:

• ❌ <img src="logo.png"> forces screen readers to announce the filename
• ✅ <img src="logo.png" alt="Acme Corporation"> or alt="" if decorative

Redundant or verbose alt text:

• ❌ alt="Image of a red cable-knit sweater with a crew neck on a white background"
• ✅ alt="Red cable-knit sweater with crew neck" (skip "image of")

Decorative images with non-empty alt:

• ❌ <img src="spacer.gif" alt="spacer"> announces useless content
• ✅ <img src="spacer.gif" alt=""> or use CSS instead

CSS background images conveying information:

• ❌ Using background-image for product photos or icons without text alternatives
• ✅ Use <img> with alt, or add aria-label to the container if CSS is unavoidable

Not updating alt text when images change:

• ❌ Swapping a "Sale: 20% off" banner for "Sale: 30% off" but leaving old alt text
• ✅ Update alt text whenever the image or its meaning changes

How to Test for WCAG 1.1.1

Automated checks:

• Run an accessibility scanner (axe, WAVE, Lighthouse) to flag missing alt attributes
• Check for images with empty src, missing alt, or alt containing filenames

Manual review (required):

• Quality check: Read every alt attribute—does it convey the same information as the image?
• Context check: Is the alt appropriate for how the image is used? (A logo in the header vs. a product photo needs different alt text)
• Decorative check: Are purely decorative images hidden with alt="" or CSS?
• Functional check: Do icon buttons and linked images describe their action?

Screen reader testing:

• Navigate the page with NVDA (Windows) or VoiceOver (Mac)
• Verify that every meaningful image is announced with useful information
• Confirm decorative images are skipped

What automated tools catch:

• Missing alt attributes
• Empty src attributes
• Suspicious patterns (filenames, "image", "graphic")

What requires human judgment:

• Whether alt text is accurate and equivalent
• Whether an image is decorative or informative
• Appropriateness of long descriptions for complex images

How TestParty Helps

TestParty automates the detection, remediation, and monitoring of WCAG 1.1.1 violations at scale—catching missing and inadequate alt text before it reaches production.

What TestParty detects:

TestParty's automated scanner analyzes your DOM and source code to identify:

• <img> elements missing the alt attribute entirely
• Images with empty src or broken image paths
• Alt text containing filenames, extensions, or placeholder text ("image", "photo", "IMG_")
• Decorative images incorrectly marked as informative (or vice versa)
• <input type="image"> buttons without alt or aria-label
• <area> elements in image maps missing alt text
• Icon fonts and SVGs without accessible labels
• Background images in CSS that convey information without text alternatives
• PDF images lacking /Alt entries or figure tags

TestParty flags these issues with severity ratings (critical for missing alt, warnings for suspicious patterns) and line-level annotations in your codebase.

How TestParty suggests fixes:

For many violations, TestParty's AI generates context-aware alt text suggestions:

• Product images: Analyzes surrounding text (product titles, descriptions) to propose relevant alt text
• UI icons: Suggests functional labels based on button context and common patterns (e.g., "Search", "Menu", "Close")
• Decorative images: Recommends alt="" when images appear to be purely decorative (borders, spacers, background flourishes)
• Logo images: Proposes brand name or "Home" for linked logos

These suggestions are surfaced in pull requests, IDE annotations, or the TestParty dashboard. A developer or accessibility specialist reviews and approves each fix before it's committed—ensuring accuracy and appropriateness. TestParty doesn't auto-deploy changes; it accelerates remediation by doing the heavy lifting and providing human-reviewable diffs.

For complex images (charts, diagrams), TestParty flags the need for long descriptions and provides templates and best-practice guidance, but leaves the content creation to your team.

Developer workflow integration:

TestParty integrates directly into your development lifecycle:

• CI/CD gates: Block merges when critical alt text violations are introduced, preventing regressions
• Pull request annotations: Surface missing or problematic alt text inline with code changes, with one-click fix suggestions
• IDE plugins: Real-time feedback as developers write HTML, JSX, or template code
• Pre-commit hooks: Catch issues locally before they're pushed

This "shift-left" approach means alt text issues are caught and fixed during development—not discovered in production or during an audit.

Ongoing monitoring:

TestParty continuously scans your live site and staging environments:

• Regression detection: Alerts when new images are added without alt text or when existing alt text is removed
• Trend dashboards: Track the percentage of images with compliant alt text over time
• Audit-ready reports: Generate WCAG 1.1.1 compliance reports for legal, procurement, or certification needs
• Page-level scoring: Identify high-traffic pages with the most alt text issues for prioritization

For ecommerce sites and CMSs (Shopify, WordPress, headless storefronts), TestParty works at the theme and template level—fixing alt text patterns once and cascading improvements across thousands of product pages.

PDF and document accessibility:

TestParty's AI-powered PDF remediation detects images in PDFs lacking /Alt entries and suggests descriptive text. It can convert inaccessible PDFs to structured, accessible HTML or guide your team through tagging, alt text, and reading order fixes—ensuring documents meet WCAG 1.1.1 alongside your web content.

TestParty doesn't replace human judgment—it amplifies it. By automating detection and suggesting fixes, TestParty lets your team focus on crafting great alt text instead of hunting for missing attributes.

Some TestParty features described in this article are currently under development. Visit TestParty.ai to learn more about our current capabilities and roadmap, or book a demo at TestParty.ai/book-a-demo to see TestParty in action.

Disclaimer: Some of this article was generated with Large Language Models (LLMs) and Artificial Intelligence (AI). There may be some errors and we advise you to consult with human professionals for detailed questions.

FAQs About WCAG 1.1.1

What is WCAG 1.1.1 in plain language?

WCAG 1.1.1 requires that every image, icon, chart, and visual element on your site has a text alternative that conveys the same information to people who can't see it. This is usually done with the alt attribute on images or aria-label on other elements. Decorative images should be hidden from screen readers with empty alt text.

Is WCAG 1.1.1 required for ADA compliance?

Yes. WCAG 1.1.1 is a Level A criterion—the baseline for ADA Title III compliance in the U.S., as well as Section 508, EN 301 549, and the European Accessibility Act. Courts consistently cite missing alt text as evidence of inaccessibility. It's one of the most commonly litigated issues.

What's the difference between alt text and a caption?

Alt text is a text alternative for people who can't see the image—it's read by screen readers and hidden from sighted users. A caption is visible text that provides context or attribution for everyone. An image can have both: alt text for accessibility and a caption for additional context.

Do decorative images need alt text?

Decorative images should have empty alt text (alt="") so screen readers skip them. If an image is purely decorative—like a border, spacer, or background flourish—announcing it to screen reader users adds noise without value. Never omit the alt attribute entirely; use alt="" to explicitly mark it as decorative.

How long should alt text be?

Aim for concise but complete—usually one to two sentences or about 150 characters. Describe the content and function, not every visual detail. For complex images (charts, diagrams), provide a short alt and a longer description nearby or linked via aria-describedby. Avoid starting with "image of" or "picture of"—screen readers already announce it's an image.

Can I use the same alt text for multiple images?

Only if the images serve the same purpose. For example, multiple "Edit" icons can all have alt="Edit". But if you have three different product photos, each needs unique alt text describing that specific product. Context matters—alt text should reflect how the image is used, not just what it depicts.