1.1.1 Non-text Content

What does it mean?

Anything that is not text, such as photos, icons, charts, image buttons or CAPTCHAs, needs a text alternative. Screen readers read that text aloud, and it is also shown when an image fails to load. The text should say what the element means in its context, not just what it looks like.

Purely decorative images get an empty alt attribute (alt="") so assistive technology skips them. Controls need a name that says what they do. For complex images like charts, a short alt plus a longer description nearby is the usual approach. CAPTCHAs, tests and sensory experiences need at least a description of what they are.

Who does it help?

• Blind people using a screen reader
• People with low vision who use speech output alongside magnification
• People on slow connections or with images turned off
• Search engines and voice assistants that read the page

Common failures

• Product photos without any alt attribute, so the screen reader reads the file name
• Icon-only buttons (search, cart, menu) with no accessible name
• Alt texts like "image", "photo" or "logo.png" that say nothing
• Decorative background flourishes announced with long, meaningless alt texts
• A chart image with key figures that appear nowhere in text

How we test it

• axe-core Automatic: axe-core finds typical violations. A violation is pre-filled as “fails”.
• evidence Evidence: our scanner collects material such as screenshots, lists and measurements.

Test question: Does every image have an alt text that says what the image means here? Decorative images need alt="".

A person decides every criterion. No criterion ever passes automatically.

How to fix it

<img src="team.jpg">
<button><svg viewBox="0 0 24 24">…</svg></button>

<img src="team.jpg" alt="Our team outside the shop in Leipzig">
<button aria-label="Search">
  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">…</svg>
</button>
<img src="divider.svg" alt="">

The photo gets a meaningful description, the icon button gets a name, and the decorative divider is hidden from screen readers.

Practical tips

• Ask yourself: if I replaced the image with this text, would the page still make sense?
• Do not start with "Image of"; screen readers already announce that it is an image.
• For a linked image, describe the link target, not the picture.

Guides and patterns on this

• The right alt text in five questionsGood alt text replaces what an image does on the page, not just what it shows. Five questions lead you to the right answer for every image.
• Your first screen reader test in 30 minutesA screen reader shows without mercy whether your page is built properly. This guide lets you test your key pages yourself, with free tools and no prior experience.
• EAA compliance check: how to get your website tested for accessibilityThe European Accessibility Act asks for accessible services, not for a particular test. This guide explains what each kind of check can tell you, how an audit works, what ours costs, and what you hold at the end.
• The EAA for small businesses: where the exemption endsMicroenterprises that provide services are exempt from the European Accessibility Act. The exemption is narrower than many think, and growing businesses can grow out of it.

Official source

Understanding WCAG 2.2 at the W3C: 1.1.1 Non-text Content