1.1.1 Non-text Content

Level A · added in WCAG 2.0

Every piece of non-text content, such as an image, icon, chart or image button, needs a text alternative that serves the same purpose. Purely decorative content must be hidden from assistive technology instead.

Who it helps

Screen reader users hear the text alternative instead of the image, and braille display users read it. It also helps people who turn images off to save data, and it gives voice control users a name to speak for image buttons.

How to meet it

Give every informative <img> an alt attribute that says what the image communicates. For a chart, that might be alt="Sales rose 40% in 2025".
For an image that is a link or button, describe the destination or action, such as alt="Search" or alt="Home", not "magnifying glass" or "logo".
Mark decorative images with alt="" (an empty alt, not a missing one), or add them as CSS backgrounds, so screen readers skip them.
Give icon-only buttons and inline SVG icons an accessible name with visible text, visually hidden text, aria-label, or role="img" plus a <title>.
For complex charts and diagrams, keep the alt short. Put the full data or description in nearby text or a linked table.
For CAPTCHAs, audio and video, give at least a text label that identifies the content; CAPTCHAs also need an alternative in another sense, such as audio.

Examples

Fails:An informative image with no alt attribute: screen readers may read the file name instead

<img src="/img/q3-revenue-chart.png">

Fails:An icon-only button with no accessible name: it is announced only as "button"

<button type="button" class="icon-btn">
  <svg viewBox="0 0 24 24" width="24" height="24">
    <path d="M3 6h18M3 12h18M3 18h18" />
  </svg>
</button>

Passes:The chart has alt text with its key message, and a decorative divider uses an empty alt

<img src="/img/q3-revenue-chart.png"
     alt="Q3 revenue: $1.2M, up 18% from Q2">
<img src="/img/divider-wave.svg" alt="">

Passes:The button gets its name from aria-label, and the SVG is hidden from assistive technology

<button type="button" class="icon-btn" aria-label="Open menu">
  <svg viewBox="0 0 24 24" width="24" height="24"
       aria-hidden="true" focusable="false">
    <path d="M3 6h18M3 12h18M3 18h18" />
  </svg>
</button>

Can a scanner detect this?

Partly

Automated tools can find images, image inputs, SVGs and role="img" elements that have no text alternative at all. They cannot tell whether alt text is accurate or whether an image marked decorative carries meaning. A person must review each image.

axe-core rules that test it

image-alt
input-image-alt
svg-img-alt
role-img-alt
object-alt
aria-progressbar-name
aria-meter-name

Common mistakes

Using the file name or a placeholder such as alt="image" or alt="IMG_2041.jpg" as the alt text.
Starting alt text with "Image of" or "Picture of", which screen readers already announce.
Leaving the alt attribute out of a decorative image instead of setting alt="", so screen readers read the file path.
Describing a linked logo as "logo" when the link actually goes to the home page.

Official W3C explanation of 1.1.1

Check your own page

See which automated WCAG checks your page fails, with the failing elements and how to fix them.

Reviewed November 2, 2026