WCAG 1.1.1 Non-text Content

What it asks

A screen reader cannot look at a picture. It reads whatever text the page attaches to it, most often the alt attribute on an image. This rule says that text has to serve the same purpose as the picture. A product photo needs a description of the product. A magnifying glass icon on a button needs the word "Search". A chart needs its message, not the word "chart".

The rule has two halves. Content that carries meaning needs a text alternative. Content that is only decoration, such as a swirl behind a heading, should be marked so that assistive software skips it, usually with an empty alt="". Giving a decorative image a long description is also a failure, because it wastes the listener’s time and hides what matters.

There are six situations where a full equivalent is not required: controls and inputs, which need a name that describes their purpose; time-based media, which is covered by the 1.2 criteria; tests and exercises that would not work in text; content meant to create a specific sensory experience, such as a piece of music; CAPTCHAs, which need a description of their purpose and another form for people with different disabilities; and pure decoration.

Its official name is success criterion 1.1.1 Non-text Content, at Level A. It was added in WCAG 2.2, under guideline 1.1 Text Alternatives and the principle Perceivable. The W3C’s normative text says, in part:

“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.”

From WCAG 2.2, W3C. Full explanation: Understanding 1.1.1 Non-text Content.

Who it helps

People who are blind and use a screen reader, for whom the text alternative is the image. People with low vision who use a screen reader alongside what they can see. People who have turned images off on a slow or expensive connection.

It also helps deaf-blind people reading through a braille display, people using voice control who need to say a button’s name to press it, and search engines, which read the same text.

What passes and what fails

These pass

• A product photo with alt="Blue canvas tote bag with brown leather handles".
• An icon-only search button with an accessible name of "Search", from aria-label or visually hidden text.
• A bar chart with a short alt describing its point, "Sales doubled between 2024 and 2026", and the figures in a table nearby.
• A decorative divider image with alt="", so screen readers pass over it.
• A CAPTCHA with a text alternative explaining that it is a test, and an audio version for people who cannot see it.

These fail

• An icon-only button with no name at all. The screen reader says "button" and nothing else.
• Alt text that repeats the filename, such as alt="IMG_4521.jpg" or alt="hero-banner-final-v2".
• A decorative background image given a long, descriptive alt that the listener has to sit through.
• An SVG with role="img" and no <title> or aria-label.
• A chart with alt="chart" or alt="graph", which names the kind of thing without its meaning.

The text alternative does not have to be in the alt attribute. A caption under the image, a description in the surrounding paragraph or a table of the same data can all serve the purpose, as long as the connection is clear. For complex images such as diagrams and charts, a short alt plus a longer description in the page is the usual pattern.

How to test it by hand

1. List every image, icon, SVG, chart, image map and image-based button on the page. Browser extensions that show alt text in place can speed this up.
2. For each one, decide what it is for. Does it carry information, is it a control, or is it decoration?
3. Check that each meaningful image has a text alternative, and read the text. Would someone who could not see the image get the same information from the text alone?
4. Check that each control has a name that says what it does, not what it looks like.
5. Check that each decorative image is hidden: alt="" on an img, or aria-hidden="true" on an SVG.
6. For charts and diagrams, check that the full information is available somewhere in text.
7. Note every image whose alt is missing, misleading or a filename, and every decorative image that is not hidden.

What automated testing can decide

What a machine can decide

Whether an image has a text alternative at all is in the code, and automated testing can find every one that has none. It can also spot the obvious bad alts, such as a filename, and an image hidden from assistive software while sitting inside a link or button with no other name. Whether the text is any good is a different question. That is a judgement about meaning, and automated testing can at most suggest an answer for a person to weigh.

What it cannot

Automated testing cannot know what an image is for. The same photograph is decoration on one page and the whole point of another. It cannot decide whether a two-word alt is enough for a chart, or whether a description in the paragraph below already does the job. And a CAPTCHA’s alternative form may live somewhere the audit never visits.

How Dreven handles it

Dreven finds the images, icons and image-based controls on your pages and shows you each one, with the page it is on and the text it was given, so you can see what a screen reader user would get.

A reviewer decides each result with that evidence in front of them, and the report says how every result was decided. Every result is one of four: passed, failed, not applicable or can’t tell.

No automated check makes a site conform. In Dreven, a person reviews the results and signs the report.

Related criteria

• 1.2.1 Audio-only and Video-only (Prerecorded) (Level A). Audio and video need alternatives of their own, covered by the 1.2 criteria.
• 4.1.2 Name, Role, Value (Level A). Every control needs a name that assistive software can read.
• 2.4.4 Link Purpose (In Context) (Level A). A linked image’s alt text becomes the link text, so it must say where the link goes.
• 1.4.5 Images of Text (Level AA). Text shown as an image should usually be real text instead.

Questions people ask

All WCAG 2.2 criteria, in plain words