WCAG 1.1.1 Non-text Content — Testing Guide (Alt Text Done Right)

WCAG 1.1.1 Non-text Content (Level A) requires that all non-text content (images, icons, video, audio, charts, CAPTCHAs) has a text alternative that serves the equivalent purpose. It is the most cited

WCAG 1.1.1 Non-text Content (Level A) requires that all non-text content (images, icons, video, audio, charts, CAPTCHAs) has a text alternative that serves the equivalent purpose. It is the most cited accessibility criterion and the most often violated. This guide covers what "equivalent purpose" actually means and how to implement it.

What it requires

Every non-text element that conveys information needs a text alternative. The alternative must serve the same purpose as the original — not just describe it visually.

Decorative content (pure visual polish) must be marked as decorative so it is ignored by assistive tech.

Content types and what to do

Informational images

Purpose: convey information. Alt text describes what the user needs to know.

<img src="chart-q3.png" alt="Q3 revenue: $2.1M, up 15% from Q2">

Not: alt="A bar chart" — that is what, not why.

Functional images (links / buttons with icons)

Purpose: execute an action. Alt / label describes the action.

<a href="/cart"><img src="cart.svg" alt="View cart"></a>

Not: alt="shopping cart icon".

Decorative images

Purpose: visual polish, adds no information.

<img src="divider.svg" alt="" role="presentation">

Empty alt="" is intentional and correct. alt must be present but empty for screen readers to skip.

Complex images (charts, diagrams, infographics)

Short alt text plus a longer description nearby.

<img src="funnel.png" alt="Conversion funnel. Details in table below.">
<figure>
  <figcaption>Q3 Conversion Funnel</figcaption>
  <table>...</table>
</figure>

Or use aria-describedby pointing to a visible or hidden description.

Icons and pictograms

Purpose varies. If standalone, describe the action. If accompanying text, mark decorative.

<button aria-label="Delete item"><svg>...</svg></button>
<button><svg aria-hidden="true">...</svg> Delete</button>

Text in images

Avoid where possible. If unavoidable (e.g., a logo), alt text duplicates the text.

<img src="logo.png" alt="Acme Corp">

CAPTCHAs

Provide an audio alternative. Do not rely solely on image-based puzzles.

Audio / video

Alt text describes the content; full transcripts for audio, captions for video, audio description for visual-only video segments.

Common violations

1. Empty or missing alt on meaningful images
2. Decorative images without alt="" (read aloud as "image" or the filename)
3. Redundant alt on icons that accompany text ("bell icon" next to "Notifications")
4. Long, verbose alt where short would do
5. Alt that describes the image but misses the purpose
6. Videos without captions
7. Audio without transcripts

Native mobile

Android

<!-- Informational image -->
<ImageView android:src="@drawable/chart"
           android:contentDescription="Q3 revenue: $2.1M, up 15%" />
<!-- Decorative -->
<ImageView android:src="@drawable/divider"
           android:importantForAccessibility="no" />
<!-- Functional (combined with clickable) -->
<ImageButton android:src="@drawable/ic_cart"
             android:contentDescription="View cart" />

iOS / SwiftUI

Image("chart")
    .accessibilityLabel("Q3 revenue: $2.1M, up 15%")

Image("divider")
    .accessibilityHidden(true)

Button(action: viewCart) {
    Image(systemName: "cart")
}.accessibilityLabel("View cart")

Testing

Automated

• axe-core flags missing alt, empty alt on decoration-eligible images
• Accessibility Scanner flags missing contentDescription
• Custom lints for specific patterns (icons without labels)

Manual

• Tour with screen reader — does every meaningful image announce something useful?
• Use a screen reader with image recognition off (iOS VoiceOver / Android TalkBack) to experience pure alt-text behavior

Content QA

Alt text authoring is often a content job, not an engineering one. Writers and editors need to understand the purpose-not-description rule and apply it consistently.

How SUSA checks 1.1.1

SUSA's accessibility_user persona audits image elements per screen:

• Missing contentDescription → critical
• Content description that looks like a filename → medium
• Decorative images without explicit decoration marker → low
• Complex images without long description → medium

For web, axe-core rules cover alt-text thoroughly. SUSA runs them on every discovered screen.

susatest-agent test myapp.apk --persona accessibility_user

The "alt text is content" mindset

Alt text is not metadata, it is content. It should be reviewed with the same care as visible text. Make it part of the design handoff. Every image comes with its alt text specified, the way every button comes with its label.

Fixing 1.1.1 across an app is usually a week of focused work. The outcome is an app that fully works for blind users and benefits many others (SEO, low-bandwidth scenarios). Worth the week.