Put aria-hidden=true on decorative SVGs

posted on 27.02.2026

This post is part of a series called #WebAccessibilityFails, where I collect common issues I find in accessibility audits so that you can avoid them in the future.

The title says it all: put aria-hidden="true" on decorative SVGs, or they'll be announced by some screen readers.

<svg viewBox="0 0 39 44" aria-hidden="true">
    <path d="M19.5 36.5 1.6 26.1v-3.6l16.3 9.4V1.5h3.2v30.4l16.3-9.4v3.6z"/>
</svg>

Similar to when you set alt="" on an img element, screen readers will ignore this SVG

Without aria-hidden="true", you get the following results:

<svg viewBox="0 0 39 44">
  <path d="M19.5 36.5 1.6 26.1v-3.6l16.3 9.4V1.5h3.2v30.4l16.3-9.4v3.6z"/>
</svg>

Bad practice: Missing aria-hidden="true" state

Most current screen readers ignore the SVG, but there are exceptions.

VoiceOver, macOS 26.3, Chrome 145:
Image
Narrator, Windows 11, Edge/Chrome 145:
Graphic
VoiceOver, macOS 26.3, Safari:
Ignores the SVG
Talkback, Android 16, Chrome 145:
Ignores the SVG
JAWS 2026, Windows 11, Chrome 145:
Ignores the SVG
NVDA 2025.3.3, Windows 11, Firefox 147
Ignores the SVG

Adding the attribute is especially important if your SVG contains presentational text.

<svg viewBox="0 0 39 44">
  <text x="20" y="35">🥔</text>
</svg>

Bad practice: Missing aria-hidden="true" state

VoiceOver, macOS 26.3, Chrome 145:
Potato

VoiceOver, macOS 26.3, Safari:
Potato

Talkback, Android 16, Chrome 145:
Potato emoji

JAWS 2026, Windows 11, Chrome 145:
Potato

NVDA 2025.3.3, Windows 11, Chrome146
Graphic, Potato

NVDA 2025.3.3, Windows 11, Firefox 147
Potato

Narrator, Windows 11, Edge:
Graphic, Potato