Standards · WCAG 2.2

SC 1.1.1 Level A WCAG 2.0

Non-text Content

Every image, icon, chart, audio file, and other non-text component must have a text alternative that serves the same purpose — so screen-reader, braille, and switch users get the same information sighted users do.

What it asks

Non-text content — images, icons, charts, animations, CAPTCHAs, audio embeds, sensory experiences — must carry a text alternative that conveys the same information or function. The text alternative is what an assistive technology will render to the user when the original cannot be perceived.

The four categories WCAG calls out:

  • Informative images need an alt that describes the information they convey.
  • Functional images (links, buttons) need an alt that describes the action, not the visual.
  • Decorative images get an empty alt (alt="") so screen readers skip them.
  • Complex images (charts, diagrams) need a short alt plus a longer description nearby in the text, in a <details> block, or via aria-describedby.

How to meet it

  • Add an alt attribute to every <img>. Empty if decorative, descriptive if informative.
  • Give every icon-only <button> an accessible name via aria-label, visible text, or an SVG <title>.
  • For charts and infographics, write a one-sentence summary alt and put the data in an accessible table immediately before or after the figure.
  • For CAPTCHAs, provide at least one non-visual alternative (audio CAPTCHA, email verification, server-side rate limiting).
  • For audio that conveys information (a podcast preview, a UI sound), provide a text equivalent.

Common failures

  • alt="image" or alt="picture of a person" — describes the medium, not the content.
  • Icon-only buttons with no accessible name (<button><svg /></button>). Screen readers announce “button” with nothing else.
  • Decorative images missing alt="" — screen readers fall back to reading the filename.
  • Chart <img> tags with the chart title as alt and the underlying data nowhere on the page.
  • CSS background images carrying meaning, with no text label in the markup.

Why it matters

This is the foundation of screen-reader accessibility. A site that fails 1.1.1 is unusable for blind users — every image becomes a dead end. It is also the most common failure axe and Lighthouse detect, because automated tools can flag missing alts but cannot judge whether the alt that’s there is meaningful.