The Accessibility Lab

Decorative Images

Learn when and how to hide decorative images from assistive technology using empty alt or aria-hidden.

beginner
1.1.1 Non-text Content (Level A)1.4.5 Images of Text (Level AA)
❌

The Bad (Inaccessible)

<!-- Decorative image with meaningless alt -->
<img src="https://images.unsplash.com/photo-1579546929518-9e396f3cc809?auto=format&fit=crop&q=80&w=400" alt="decorative swirl image">

<!-- Icon with redundant description -->
<button>
  <svg class="icon" viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" /></svg>
  Search
</button>
✅

Accessibility-Ready Code

<!-- Decorative image: empty alt hides from AT -->
<img src="https://images.unsplash.com/photo-1579546929518-9e396f3cc809?auto=format&fit=crop&q=80&w=400" alt="">

<!-- Icon next to text: hide the icon -->
<button class="accessible-button">
  <svg aria-hidden="true" class="icon" viewBox="0 0 24 24" width="20" height="20">
    <path fill="currentColor" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
  </svg>
  Search
</button>

The Standard

Not all images need to be announced by screen readers. Decorative images (backgrounds, flourishes, icons with text labels) should be hidden from the accessibility tree to reduce noise.

WCAG Criteria

  • 1.1.1 Non-text Content (Level A): Decorative images must be implemented so AT can ignore them.
  • 1.4.5 Images of Text (Level AA): Decorative text images should be pure CSS when possible.

❌ The Bad (Inaccessible)

What’s Wrong?

  1. Meaningless Alt Text: “decorative swirl image” adds zero value for a blind user.
  2. Redundant Icon Description: If the button says “Search”, announcing “magnifying glass icon, Search” is noise.
  3. Cognitive Overload: Every unnecessary announcement slows down screen reader users.

✅ The Good (Accessibility-Ready Code)

Why This Works

  1. Empty Alt (alt=""): Tells screen readers to skip the image entirely.
  2. aria-hidden="true": Explicitly removes the element from the accessibility tree.
  3. Text Label Preserved: The button’s “Search” text provides full context.

Accessibility Checklist

  • Use alt="" for purely decorative images (swirls, backgrounds).
  • Add aria-hidden="true" to icons that appear next to descriptive text.
  • Prefer CSS for decorative backgrounds over <img> tags.
  • Never use placeholder alt like “image” or “icon” for decorative content.
  • Test with a screen reader to confirm the image is NOT announced.
📍 Perfect Implementation Reference
<!-- Background Pattern -->
<img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop&q=80&w=400" alt="" aria-hidden="true">

<!-- Redundant Icon -->
<button>
  <svg aria-hidden="true">...</svg>
  Submit
</button>

Technical Deep Dive

The Accessibility Tree

With alt="" (correct):

Role: img (removed from tree)
Name: (none)

With meaningless alt (wrong):

Role: img
Name: "decorative swirl image"

Decision Flowchart

  1. Does the image convey information? → Add descriptive alt text.
  2. Is the image purely decorative? → Use alt="".
  3. Is there adjacent text that describes it? → Use alt="" + aria-hidden="true".
🧪

Interactive Behavioral Lab

💻

Interactive Sandbox

LIVE PREVIEW

🔬 Technical Internals

Understand how this component is processed by the browser and Assistive Technology (AT). This section bridges the gap between visual code and the hidden logic that powers accessibility.

🌲 Accessibility Tree

The data structure used by screen readers to "see" your page. It translates HTML roles and attributes into standardized objects.

⚙️ Event Logic

Expected behavioral standards for keyboard navigation and state transitions. Crucial for users who don't use a mouse.

  • Focus: Highlights via :focus-visible
  • Activation: Responds to Enter and Space
  • Role: Identified as Image Pattern

🌐 Browser & Screen Reader Compatibility

Browser
Screen Reader
Status
🍎 Safari
VoiceOver
✓ Safe
🪟 Chrome
NVDA
✓ Safe
🪟 Edge
JAWS
✓ Safe
🦊 Firefox
NVDA
✓ Safe
📱 iOS Safari
VoiceOver
✓ Safe
🤖 Chrome Android
TalkBack
✓ Safe

🔗 More in Media & Graphics

Figure with Caption

beginner

Alt Text for Images

beginner

Responsive Picture

intermediate