Skip to main content
Perceivable WCAG 1.1.1

1.1.1 Non-text Content

All non-text content presented to the user has a text alternative that serves the equivalent purpose.

Level A Critical WCAG 2.0 (new) WCAG 2.1 WCAG 2.2
image-alt input-image-alt area-alt object-alt svg-img-alt role-img-alt image-redundant-alt

What this rule means

WCAG 1.1.1 requires that every piece of non-text content — images, icons, charts, audio, video, CAPTCHA, and decorative graphics — has a text alternative that conveys the same information or function. Screen readers, braille displays, and search engines all rely on these text alternatives to understand visual content.

The text alternative must serve the equivalent purpose as the non-text content. For an informative photograph, that means describing what the image communicates. For a functional button, it means stating the action the button performs. For purely decorative items, it means explicitly marking them so assistive technology can skip them.

Why it matters

Approximately 2.2 billion people worldwide have some form of vision impairment. When a screen reader encounters an image without alt text, it typically announces the file name — something like "DSC_0042.jpg" — which provides no useful information. Users who rely on text-to-speech, braille output, or text-only browsers are completely locked out of meaning conveyed through images.

Beyond accessibility, text alternatives improve SEO ranking, support users on slow connections who disable images, and provide fallback content when images fail to load. Proper alt text is one of the highest-impact, lowest-effort accessibility improvements you can make.

Related axe-core rules

  • image-alt — Ensures <img> elements have alternative text.
  • input-image-alt — Ensures <input type="image"> elements have alternative text.
  • area-alt — Ensures <area> elements within an image map have alternative text.
  • object-alt — Ensures <object> elements have alternative text.
  • svg-img-alt — Ensures SVG elements with an img role have an accessible name.
  • role-img-alt — Ensures elements with role="img" have alternative text.
  • image-redundant-alt — Ensures alt text is not duplicated as adjacent text content.

How to test

Start by running an automated scan with axe-core or Lighthouse. These tools catch missing alt attributes reliably. However, automated tools cannot judge whether alt text is accurate or meaningful — that requires manual review.

  • Run axe DevTools or Lighthouse in Chrome DevTools and review the image-alt findings.
  • Use the Web Developer Toolbar to replace images with their alt text and verify the page still makes sense.
  • Navigate the page with a screen reader (NVDA, VoiceOver, or JAWS) and confirm every image is announced with useful information.
  • Check that decorative images are hidden from assistive technology using alt="" or role="presentation".
  • Inspect SVGs, <object> elements, and image maps — these are commonly missed in automated checks.

How to fix

Below are correct and incorrect implementations for the most common non-text content patterns.

Images — bad practice

<!-- Missing alt attribute entirely -->
<img src="team-photo.jpg">

<!-- Empty alt on an informative image -->
<img src="quarterly-chart.png" alt="">

<!-- File name or generic text as alt -->
<img src="hero.jpg" alt="hero.jpg">
<img src="banner.png" alt="image">

Images — good practice

<!-- Informative image with descriptive alt -->
<img src="team-photo.jpg" alt="The Inculva engineering team at the 2025 accessibility summit">

<!-- Chart with meaningful description -->
<img src="quarterly-chart.png" alt="Q3 revenue grew 18% compared to Q2, reaching $4.2M">

<!-- Decorative image correctly hidden -->
<img src="decorative-swirl.svg" alt="" role="presentation">

SVG elements

<!-- Bad: SVG with no accessible name -->
<svg viewBox="0 0 24 24">
  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10..."/>
</svg>

<!-- Good: SVG with role and aria-label -->
<svg role="img" aria-label="Checkmark icon indicating success" viewBox="0 0 24 24">
  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10..."/>
</svg>

<!-- Good: Decorative SVG hidden from AT -->
<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10..."/>
</svg>

Input type="image" and image maps

<!-- Bad: input image with no alt -->
<input type="image" src="search-icon.png">

<!-- Good: input image with descriptive alt -->
<input type="image" src="search-icon.png" alt="Search">

<!-- Bad: area without alt -->
<map name="nav">
  <area shape="rect" coords="0,0,100,50" href="/about">
</map>

<!-- Good: area with alt text -->
<map name="nav">
  <area shape="rect" coords="0,0,100,50" href="/about" alt="About us">
</map>

Object and embed elements

<!-- Bad: object with no text alternative -->
<object data="animation.swf" type="application/x-shockwave-flash"></object>

<!-- Good: object with fallback text -->
<object data="animation.swf" type="application/x-shockwave-flash">
  <p>Animated demonstration of the checkout flow showing three steps: cart review, payment, and confirmation.</p>
</object>

Common mistakes

  • Using the file name as alt text (e.g., alt="IMG_3021.jpg").
  • Writing "image of" or "picture of" in alt text — screen readers already announce the element as an image.
  • Giving decorative images descriptive alt text, which adds noise for screen reader users.
  • Leaving alt text empty on informative images such as charts, diagrams, or product photos.
  • Duplicating adjacent visible text in the alt attribute, causing screen readers to repeat the same content.
  • Forgetting alt text on <area> elements inside image maps — these are interactive and need labels.
  • Using CSS background images for meaningful content without providing a text alternative in the DOM.
  • Writing overly long alt text (150+ words) instead of using a short alt with a longer description via aria-describedby or a linked description page.

Resources