WCAG 1.1.1: Non-text Content
A screen reader cannot describe a photo, a braille display cannot render a chart, and a search engine cannot index an icon. This criterion asks that every piece of non-text content has a text alternative that serves the equivalent purpose. Get this one right and images, charts, icons, and graphical buttons stop being dead ends for the people and technologies that rely on text.
The success criterion, in full
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. Test: If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content. Sensory: If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content. CAPTCHA: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities. Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.
The core rule is one sentence; the rest is a list of situations where a full equivalent is impossible or unnecessary, and what is required instead. Note that decorative content is not exempt from the criterion — it must be actively implemented so assistive technology can skip it.
Who this helps
Text is the most adaptable format on the web: it can be spoken aloud, rendered in braille, enlarged, translated, restyled, and indexed. A text alternative lets non-text content reach everyone that text reaches:
Blind users
Screen readers and refreshable braille displays can only present text. Without alt text, an image is announced as nothing at all — or worse, as a meaningless file name like 'IMG_4032.jpg'.
Low vision users
People who zoom heavily or use screen readers alongside magnification may not be able to make out details in an image; the text alternative fills the gap.
People with cognitive and learning disabilities
Text alternatives can be read aloud by text-to-speech tools and provide a clearer, more explicit statement of what a complex graphic shows.
Users on slow or unreliable connections
When images fail to load or are disabled to save data, browsers show the alt text in their place — the page keeps working.
Deafblind users
Braille output is the only channel available; every image without a text alternative is simply gone from the page.
Search engines and automation
Crawlers, AI assistants, and voice interfaces understand your images only through their text alternatives — good alt text is also good SEO.
What the requirement covers
“Non-text content” is broader than photographs. It includes raster and vector images, icons, charts, diagrams, infographics, images of text, image maps, graphical buttons and inputs, ASCII art, emoji used as content, audio and video files, and CAPTCHAs. The right alternative depends on the purpose the content serves, so the practical first step is always classification:
- Informative images. Convey information: photos, illustrations, charts. Alt text must communicate the same information the image does, in its context.
- Functional images. Perform an action: icon buttons, linked logos, image inputs. The text alternative describes the function ('Search', 'Go to homepage'), never the appearance.
- Complex images. Charts, graphs, diagrams, maps. Short alt text identifies the image; a full alternative nearby (data table, structured description) carries the detail.
- Images of text. The alt text must contain the same words shown in the image. (Also see 1.4.5 Images of Text, which asks you to avoid these entirely where possible.)
- Decorative images. Purely aesthetic: backgrounds, flourishes, spacers, icons that duplicate adjacent text. Implement them so assistive technology ignores them — empty alt="", CSS backgrounds, or aria-hidden.
The exceptions, briefly
Where a full text equivalent is impossible, the criterion scales the requirement down rather than dropping it. Audio and video need at least a descriptive identification here (the full alternatives are required by the 1.2.x Time-based Media criteria). A color-perception test or a music sample only needs to be identified for what it is — describing it fully would defeat its purpose. CAPTCHAs must state their purpose and offer alternative modalities (for example an audio CAPTCHA alongside the visual one) so no single disability locks a user out.
Pass and fail examples
✓ Passes 1.1.1
- A product photo with alt text describing the product shown.
- A bar chart with brief alt text plus the underlying data in an adjacent table.
- An icon-only search button whose accessible name is “Search”.
- A decorative divider image with
alt="". - A CAPTCHA labelled for its purpose, with an audio alternative offered.
✗ Fails 1.1.1
- An informative image with no alt attribute — screen readers announce the file name.
- Alt text that names the file or the format (“chart.png”, “photo”) instead of the content.
- An icon-only button with no accessible name at all.
- An infographic whose data exists nowhere in text form.
- A decorative image with verbose alt text that adds noise (“beautiful abstract blue swirl background”).
Code examples
Informative vs. useless alt text
Alt text should convey the information the image carries in its context — not label the image as an image.
<!-- ✗ Missing, redundant, or meaningless alternatives -->
<img src="q4-sales.png">
<img src="q4-sales.png" alt="chart">
<img src="q4-sales.png" alt="Image of a picture of a chart">
<!-- ✓ Conveys the same information as the image -->
<img src="q4-sales.png"
alt="Bar chart: quarterly sales grew from $2.3M in Q1
to $3.6M in Q4, a 57% year-over-year increase">Decorative and functional images
Decorative images get an explicitly empty alt="" so screen readers skip them. Functional images are named for what they do.
<!-- ✗ Decorative image announced as noise; icon button unnamed -->
<img src="divider-swirl.png" alt="decorative blue swirl divider">
<button><img src="magnifier.svg"></button>
<!-- ✓ Decoration skipped; function named -->
<img src="divider-swirl.png" alt="" role="presentation">
<button>
<img src="magnifier.svg" alt="Search">
</button>
<!-- ✓ Or: visible text carries the name, icon hidden -->
<button>
<svg aria-hidden="true" focusable="false"><!-- icon --></svg>
Search
</button>Complex images: short alt + full alternative
A chart cannot be equivalently described in one attribute. Identify it briefly, then provide the data as real, visible content.
<figure>
<img src="traffic-trend.png"
alt="Line graph of website traffic over 12 months,
described in the table below">
<figcaption>Monthly visitors, January–December</figcaption>
</figure>
<table>
<caption>Monthly visitors (thousands)</caption>
<thead>
<tr><th scope="col">Month</th><th scope="col">Visitors</th></tr>
</thead>
<tbody>
<tr><td>January</td><td>45</td></tr>
<tr><td>February</td><td>52</td></tr>
<!-- … remaining months … -->
<tr><td>December</td><td>94</td></tr>
</tbody>
</table>Interactive demo
Toggle the alt text on the examples below to compare weak and strong text alternatives across the four image categories — informative, decorative, functional, and complex.
Toggle to see how alt text appears for screen reader users
Informative images
alt="chart"alt="Bar chart showing quarterly sales growth: Q1 $2.3M, Q2 $2.8M, Q3 $3.1M, Q4 $3.6M, demonstrating 57% year-over-year growth"Why This Works:
Describes the data and trends shown in the chart
alt="office"alt="Modern open office space with collaborative workstations, natural lighting, and team members working on laptops"Why This Works:
Describes the environment and activity taking place
alt="coding"alt="Developer writing JavaScript code on dual monitors showing a React application with component hierarchy"Why This Works:
Specifies the technology and context of the work
Decorative images
alt="abstract background"alt=""Why This Works:
Decorative pattern - empty alt attribute allows screen readers to skip
alt="geometric shapes"alt=""Why This Works:
Background design element - no informational value
Functional images
alt="download icon"alt="Download PDF report"Why This Works:
Describes the action that will be performed
alt="search"alt="Search products"Why This Works:
Describes the function, not the appearance
Complex images
alt="chart"alt="Line graph showing website traffic trends over 12 months"Why This Works:
Complex data requires both alt text and detailed description
Long Description:
Detailed data: January 45K visitors, February 52K (+15%), March 48K (-8%), April 61K (+27%), May 58K (-5%), June 67K (+16%), July 72K (+7%), August 69K (-4%), September 78K (+13%), October 82K (+5%), November 88K (+7%), December 94K (+7%). Overall growth of 109% from start to end of year.
Common failures
- Omitting the alt attribute entirely, so screen readers announce the raw file name or path.
- Placeholder alt text like 'image', 'photo', 'graphic', 'logo', or the file name — present but meaningless.
- Icon-only buttons and links with no accessible name (a bare magnifying glass, hamburger, or close ✕).
- Charts, graphs, and infographics whose data exists only in pixels, with no text or table equivalent anywhere.
- Starting alt text with 'Image of…' or 'Picture of…', which screen readers duplicate ('image, image of…').
- Giving decorative images descriptive alt text, forcing screen reader users to listen to visual noise.
- CSS background images that carry meaning (state icons, text baked into hero graphics) with no text equivalent in the page.
- A visual-only CAPTCHA with no audio or alternative modality, which locks out blind users entirely.
- Stale alt text left behind after the image was swapped for something different.
How to test for 1.1.1
- 1
Run an automated scan first
Tools like axe DevTools, WAVE, and Lighthouse reliably catch images with a missing alt attribute and unnamed image buttons. Treat this as the floor: automation finds absent alternatives, not bad ones.
- 2
Inspect every image's alternative in context
For each img, SVG, icon, and graphical control, read the accessible name and ask: does this convey the same information or function as the visual? 'chart' on a revenue chart passes a scanner and fails the criterion.
- 3
Verify decorative images are silenced
Check that purely decorative images use alt="" (or aria-hidden / CSS backgrounds) rather than describing themselves. In a screen reader, the page should read cleanly without decorative interruptions.
- 4
Listen to the page with a screen reader
Navigate by graphics (e.g. G in NVDA/JAWS, or the VoiceOver rotor's images list). Every announced image should make sense on its own; any 'unlabelled graphic' or file-name announcement is a failure.
- 5
Disable images and reload
Turn images off in the browser (or throttle and block them in DevTools). The page should remain fully understandable and operable using the alt text that appears in place of each image.
- 6
Check complex images for full equivalents
For every chart, diagram, and infographic, confirm a complete text alternative exists — a data table or structured description — and that it actually contains the same conclusions a sighted user would draw.
For a structured audit, work through the full WCAG 2.2 checklist.
Related Success Criteria
Provide alternatives for prerecorded audio-only and video-only content.
Captions are provided for all prerecorded audio content in synchronized media.
Audio description or full text alternative is provided for prerecorded video content.
Captions are provided for all live audio content in synchronized media.
Audio description is provided for all prerecorded video content.
Frequently asked questions
What does WCAG 1.1.1 Non-text Content require?
It requires that all non-text content presented to the user has a text alternative that serves the equivalent purpose. In practice that means every meaningful image, chart, icon, audio clip, and control rendered as a graphic needs text that conveys the same information or function. The criterion lists specific exceptions: controls and inputs need only a descriptive name; time-based media needs only descriptive identification (full alternatives are covered by the 1.2.x criteria); tests and sensory experiences need descriptive identification; CAPTCHAs need alternatives in different modalities; and purely decorative content should be implemented so assistive technology can ignore it. It is a Level A criterion, part of WCAG since 2.0.
When should an image have an empty alt attribute (alt="")?
Use an empty alt attribute when the image is purely decorative, is used only for visual formatting, or repeats information already available in adjacent text. An empty alt tells screen readers to skip the image entirely, which is exactly what a user wants for a background flourish or a spacer. Never omit the alt attribute altogether: without it, many screen readers fall back to announcing the file name, which is worse than silence. The decision is contextual — the same photo can be informative on one page and decorative on another.
How long should alt text be?
There is no normative character limit, but a widely used guideline is to keep alt text concise — usually under about 125 characters — and focused on conveying the same information as the image in its context. Do not start with 'Image of' or 'Picture of'; screen readers already announce the element as an image. When an image is too complex to summarize briefly (charts, diagrams, infographics), give it short alt text that identifies it and provide the full detail in nearby text, a data table, or a linked long description.
What alt text does a functional image (like an icon button) need?
Functional images take their text alternative from the action they perform, not from what they look like. A magnifying-glass icon inside a search button should be named 'Search', not 'magnifying glass'. If the icon sits inside a button or link that already has visible text, the icon itself should usually be decorative (empty alt or aria-hidden) so the accessible name is just the action. An icon-only control with no text alternative at all is one of the most common and most serious 1.1.1 failures.
How do I handle complex images like charts and diagrams?
Complex images need two layers: a concise alt text that identifies what the image is ('Line graph showing website traffic trends over 12 months'), plus a complete alternative that carries the actual data or relationships — a data table, a structured text description near the image, or a link to a long description. The test is equivalence: a user who cannot see the chart should be able to extract the same conclusions from the alternative. The obsolete longdesc attribute is poorly supported; visible adjacent text or an expandable description is more reliable.
Does CSS background imagery need a text alternative?
Only if it conveys information. CSS background images used for decoration are already invisible to assistive technology, which is fine. But if a background image carries meaning — a hero graphic containing text, an icon that is the only indicator of state — that information must also exist as real text in the page or as an accessible name on the element. As a rule, content belongs in HTML (img with alt) and decoration belongs in CSS.