WCAG 1.1.1 Non-text Content explained

Last updated 6 November 2026

WCAG 1.1.1 Non-text Content is a level A success criterion of WCAG 2.2 [2]. It asks for a text alternative for images, icons, charts, sounds and other non-text content [1]. That text can be read aloud, shown visually or turned into braille [1]. This page explains what counts, the exceptions, how to meet the criterion, how to test it, and what an automated checker such as Curbcut can and cannot find.

What the criterion says

The normative text reads:

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. [2]

Three terms carry the meaning.

Non-text content is anything that is not a sequence of characters, or whose characters do not express something in human language [2]. Images, image buttons, icons, charts, audio, video, ASCII art and emoji all count [1].
A text alternative is text tied to the content in code, or text that such code points to [2]. In HTML the alt attribute is the preferred way to provide it [5].
Equivalent purpose means the text does the same job as the content. The same picture can need different text on different pages [1].

W3C gives an example of the last point. An image of the world links to a travel section on one site. There its text alternative is "International Travel". On a university site the same image reads "International Campuses" [1].

The exceptions

The criterion lists six situations where a full text equivalent is not required. Each still asks for something [1].

Controls and input. A control needs a name that describes its purpose. Success Criterion 4.1.2 adds more rules for controls [1].
Time-based media. Audio and video need at least a text that identifies them. Guideline 1.2 covers captions and audio description [1].
Tests and exercises. A hearing test or a spelling test would not work in text. It needs at least a text that identifies it [1].
Sensory experiences. A symphony or a painting gets a descriptive label, plus more description where possible [1].
CAPTCHA. The text alternative names and describes the purpose of the CAPTCHA. A second form that uses a different sense must also be offered [1].
Decoration, formatting and invisible content. These must be built so that assistive technology can ignore them [1].

Pure decoration means content with only an aesthetic purpose. It carries no information and has no function [2].

Who it helps

Text alternatives help people who are blind or have low vision. A screen reader reads the text aloud or sends it to a braille display [1]. People who are deafblind read the text in braille [1]. People who are deaf or hard of hearing read a text version of audio [1]. Some people with trouble understanding images or charts are helped by the text too [1]. Text alternatives also make images and media searchable [1].

How to meet it in HTML

Start with what the image does on the page. The W3C alt decision tree asks a short set of questions [3].

Informative image. Write a brief description that gives the same meaning in the alt attribute [3].
Image in a link or button. Describe where the link goes or what the button does, not the picture [3].
Image of text. Put the same text in the alt attribute, unless that text also appears as real text nearby [3].
Chart or diagram. Give a short alt, and put the full information elsewhere on the page [3]. A link next to the image, a figure with a caption, or aria-describedby can carry the long description [6].
Decorative image. Use an empty alt="" and no title attribute [4]. An empty alt is not the same as a missing alt [4].
Image that repeats nearby text. Use an empty alt, so the words are not read twice [3].

<!-- Informative -->
<img src="opening-hours.png" alt="Open Monday to Friday, 9:00 to 17:00">

<!-- Functional: the button searches -->
<input type="image" src="magnifier.svg" alt="Search">

<!-- Decorative -->
<img src="divider.svg" alt="">

<!-- SVG that carries meaning -->
<svg role="img" aria-label="Sales rose 12% in March">...</svg>

For alt text itself, ask why the image is there and what it tells the reader [7]. Words like "image", "chart" or a file name rarely help [7]. Curbcut's own fix text adds one more point: keep alt text short and do not start it with "image of".

Common failures

W3C lists the mistakes that fail this criterion [1]. The frequent ones in HTML are these:

An img, area or input type="image" with no alt and no other text alternative [5]. Some screen readers then read the file name, which is rarely useful [5].
A file name or placeholder text used as the alt text [1].
A decorative image with alt text such as "spacer" or "image" instead of an empty alt [1].
Information given only by a CSS background image [1].
An image that changes while its text alternative stays the same [1].
ASCII art with no text alternative [1].

How to test it

List every non-text item on the page. Include img, input type="image", area, svg, elements with role="img", object, icon fonts, CSS background images, audio and video.
Check that each item has a text alternative: an alt, aria-labelledby, aria-label or title [5].
Read each text alternative in context. Ask whether it does the same job as the content [1].
Confirm that every image with an empty alt is truly decorative or repeats nearby text [3].
For charts and diagrams, check that the long description holds the same information [6].
Listen to the page with a screen reader, or read it with images turned off.

Steps 3 to 6 need a person. A checker can tell whether a text alternative exists. It cannot tell whether the text is right for the page.

What an automated checker finds

The axe-core 4.14 rules that map to 1.1.1 include image-alt, input-image-alt, object-alt, role-img-alt and svg-img-alt [8]. They report images and image-like elements with no text alternative. The image-alt rule passes an image with alt text, or one marked as presentation [7]. So a checker finds a missing alt. It cannot judge whether the alt text fits the image and the page.

How Curbcut checks it

The Curbcut browser extension for Chrome, Edge and Firefox checks the page you are on against WCAG 2.2. Its report can group issues by success criterion, so all 1.1.1 issues sit together. Each issue says what is wrong and who is affected, and gives fix steps with a before and after example. It also links the W3C Understanding document. Show on page scrolls to the image and outlines it. The docs cover each step.

In code, the VS Code extension flags an img without alt as you edit. A quick fix inserts an alt attribute for you to complete; Curbcut does not write the text for you. An alt set from a variable is reported as unknown, never guessed. The WordPress plugin checks each post in the editor and names the block setting to change.

Automated checks, ours included, find only part of all WCAG failures. Text alternatives are a clear case: the tool finds the gaps, and a person judges the words. For contrast fixes, see the guide on low text contrast. Other criteria are in the WCAG 2.2 reference, and plans are on the pricing page.