Design

SVG Accessibility Guide: Titles, ARIA, Decorative vs Informative Icons

an SVG icon next to a checklist ‘Decorative vs Informative • title • aria-label • role=img’. Minimal UI, dark theme, clean typography ‘SVG Accessibility
an SVG icon next to a checklist ‘Decorative vs Informative • title • aria-label • role=img’. Minimal UI, dark theme, clean typography ‘SVG Accessibility

SVG accessibility is simple once you stop treating every icon the same.

The real question is:
Is the SVG decorative or informative?

If it’s decorative, hide it from screen readers.
If it’s informative, give it a text equivalent.

This guide gives you practical rules that work in real apps.

Your asset creation hub (to generate clean SVGs first):

Step 1: Decorative vs informative (the main rule)

Decorative SVG

An icon that adds visual flair but no meaning.
Example:

  • background shapes

  • decorative sparkles

  • icon next to a heading that repeats the same meaning

✅ Best practice: hide it from assistive tech.

Informative SVG

An icon that communicates meaning.
Example:

  • warning triangle indicating error

  • a button icon with no text label

  • status icons (success/fail)

✅ Best practice: give it an accessible name.

Step 2: Decorative SVG handling

If it’s decorative:

  • mark it as hidden from screen readers

Common approaches:

  • aria-hidden="true"

  • or role="presentation"

Do this especially for repeated icons in lists and cards.

Step 3: Informative SVG handling

If the SVG carries meaning:

  • ensure it has an accessible name via aria-label or a <title>

Examples:

  • Button icon (trash): label it “Delete”

  • Status icon: label it “Error” / “Success”

Rule:
If removing the icon would remove information, it must be accessible.

Step 4: Icons inside buttons (the common trap)

A button with only an icon needs a label.

If you have:

  • a magnifying glass icon button

It must have:

  • aria-label="Search" (or visible text)

Otherwise screen readers announce it as “button” with no meaning.

Step 5: Don’t double-announce

If the button already has visible text “Search” and the icon is purely decorative:

  • hide the icon (aria-hidden="true")

  • let the visible text be read

This prevents screen readers from reading “Search Search”.

Step 6: Consistency + testing

Accessibility isn’t “best effort.” It’s a system.

Create a rule in your design system:

  • Decorative icons: always hidden

  • Informative icons: always labeled

Then test:

  • keyboard navigation

  • screen reader basics

  • icon-only buttons


CTA