WCAG 1.1.1 says that every piece of non-text content, such as a photo, icon, chart, image button or CAPTCHA, must have a text alternative that serves the same purpose, while purely decorative images are hidden with an empty alt="". This Level A rule is also the failure we log most often in audits.
Below we cover the kinds of non-text content, the special cases, how to test a page, and the fixes that work in real code. For the craft of choosing the words, pair it with our alt text basics.
Quick facts
Level
A (minimum)Added in
WCAG 2.0, unchanged in 2.1 and 2.2Principle
Perceivable, guideline 1.1 Text alternativesDecorative images
alt=""with no space between the quotesFast test
Check every img for an alt attribute, then read each alt out of contextHelps most
Blind screen reader users, braille readers, voice control users
What WCAG 1.1.1 asks for, in one paragraph
Anything on the page that is not text needs a text twin. That text can be an alt attribute, a visible caption, a label on a control or a longer description nearby. The twin must do what the original does for a sighted user. If a photo shows that a product comes in three colors, the text says so. If an icon button deletes a row, its name says Delete. If an image only adds decoration, the code tells assistive technology to skip it with alt="".
WCAG puts the idea like this: "All non-text content that is presented to the user has a text alternative that serves the equivalent purpose" (WCAG 2.2, success criterion 1.1.1). The rest of the rule lists special cases, which the next section explains.
Special cases the rule spells out
| Kind of content | What it needs |
|---|---|
| Informative image or icon | Short alt text that carries the same message |
| Control or input (image button, icon link, slider) | A name that says what it does, such as Search or Volume |
| Audio or video file | At least a short label naming it; captions and transcripts fall under the 1.2 media rules |
| Test or exercise that must stay visual | A text label saying what it is, without giving away the answer |
| Sensory experience, such as a painting or a music clip | A label that names it, for example the title of the artwork |
| CAPTCHA | Text saying what it is for, plus another way to pass it that uses a different sense, such as audio |
| Decoration, spacing images, invisible tracking pixels | Hidden from assistive technology: alt="" or a CSS background |
A common mistake is to treat the decorative case as the default. Most images on a working page carry some meaning, so ask what would be lost if the picture vanished. Our guide to writing alt text walks through that question with examples.
Who notices when 1.1.1 is missing
- Blind users of a screen reader hear the text alternative. When the attribute is absent, a typical screen reader announces the file name instead, which might be a camera code like DSC 0093.
- People on slow or metered data who switch images off get the alt text shown where the photo would be.
- Braille readers get that identical wording on a refreshable braille line.
- Voice control users activate an icon button by speaking its name; without one, they have nothing to say.
- Search engines also read alt text to understand images, a side benefit covered on the alt text and SEO page.
Markup that fails and markup that passes
Fails: the photo has no alt, and the icon button has no name at all.
<img src="team-lunch.jpg">
<button type="button">
<svg viewBox="0 0 24 24"><path d="M3 6h18"/></svg>
</button>Passes: the photo has a short description, the icon is hidden, and the button text names the action.
<img src="team-lunch.jpg" alt="Support team sharing lunch on the office roof">
<button type="button">
<svg aria-hidden="true" viewBox="0 0 24 24"><path d="M3 6h18"/></svg>
<span class="visually-hidden">Open menu</span>
</button>The visually-hidden class is a common CSS pattern that keeps text available to assistive technology while hiding it on screen. An aria-label on the button would also work; see the ARIA label guide for when to choose each.
How to test a page for non-text content
A scan finds missing attributes in seconds, but only a person can judge whether the words fit. Use this routine on each template.
- List every non-text item. Scroll the page and note each photo, icon, logo, chart, image button, CAPTCHA and embedded graphic you can see.
- Check the alt attribute. Open the browser developer tools or paste the source into an alt checker and confirm every img has an alt attribute, empty or filled.
- Judge each text alternative. Read each alt out of context and ask whether it gives the same information or does the same job as the picture on this page.
- Find icon controls. Tab to every icon button and link and confirm each one has a name such as Search, Close or Menu.
- Run a screen reader pass. Have a screen reader announce each image and control, and note anything announced as a file name, as "unlabeled" or skipped.
- Review complex images. For charts, maps and diagrams, check that the data or the main point is written out in nearby text or on a linked page.
Drop the page source into the alt checker on this site to get a list of every image with missing, empty or suspicious alt text before you start reading them one by one.
Failures auditors log most often
| What we find | Why it fails | Fix |
|---|---|---|
img with no alt attribute | Screen reader announces the file name | Write alt text; use alt="" only for decoration |
| Alt says "image" or "photo" or repeats the file name | Gives no information | Describe what matters in this context |
| Linked logo with alt "logo" | The link has no clear destination | Use the destination, such as "Home page" |
| Icon font or SVG button with no name | Announced as "button" with nothing else | Add hidden text or an aria-label |
| Chart image with alt "chart" | Data is lost | Summarise the trend in alt and give the numbers in a table nearby |
| Decorative swirl with long alt text | Adds noise to every visit | Set alt="" or move it to CSS |
| Image CAPTCHA with no other option | Blocks blind users completely | Offer an audio or non-visual alternative |
Where 1.1.1 meets nearby success criteria
1.4.5 (AA) goes further for pictures of words: it says to use real, styled text instead. 1.1.1 only asks that such a picture has alt text with the same words. Meeting one does not meet the other. See our page on pictures of words.
2.4.4 Link purpose applies when a picture sits alone inside a link. The alt then has to describe where the link goes, which our 2.4.4 page covers.
4.1.2, which deals with how custom controls expose their name and state, overlaps here. An icon button without a name usually fails both rules. Details are on our custom controls page.
1.2 Time-based media handles captions, transcripts and audio description. 1.1.1 asks only for a short identifying label on the media itself.
Read the full W3C explanation, with every exception, on the Understanding Non-text Content page.
Questions people ask
Which things fall under non-text content in WCAG?
Every image, icon, chart, control or other non-text item needs text that does the same job. Screen readers and braille displays read that text aloud or in braille. Decorative images are the exception and get an empty alt.
Which level is 1.1.1 wcag, A or AA?
Level A, the minimum. It first appeared in WCAG 2.0 and reads the same in 2.2. Any AA claim includes it.
Does a background image in CSS need alt text?
Not if it is decorative, because CSS backgrounds are ignored by screen readers. If the background image carries meaning, such as a product photo or a chart, move it into an img element with alt text or add the information as text on the page.
Does every SVG icon need a text alternative?
Only if it carries meaning on its own. An icon inside a button that already has visible text can be hidden with aria-hidden. An icon that is the only content of a button or link needs a name for that control.
How long should alt text be to pass 1.1.1?
WCAG sets no length. Keep it to the point, usually one or two short sentences. Put long content such as chart data in nearby text or a linked description instead.
Can an automated checker confirm that a page passes 1.1.1?
No. A checker can find missing alt attributes, but it cannot tell whether the words match the picture or the context. A person has to read each text alternative.