Seoxpert.io
Get started
lowOn-Page SEO

Inline SVGs Missing Accessible Name

Inline SVGs lack accessible names, making them unreadable by screen readers and harming accessibility.

By Seoxpert Editorial · Published

Why it matters

SVGs are widely used for icons and illustrations. Without accessible names, screen readers can't describe their purpose, confusing users who rely on assistive technology. This impacts both accessibility compliance and user experience, and can indirectly affect SEO by reducing site usability.

Impact

Screen reader users may miss important information or become confused by SVGs without accessible names.

How it's detected

The issue is detected by scanning for inline <svg> elements missing a <title> child, aria-label, or aria-labelledby, and not marked aria-hidden="true".

Common causes

  • •Developers omit <title> or aria-label on meaningful SVGs.
  • •Decorative SVGs are not marked aria-hidden="true".
  • •SVGs are copied from design tools without accessibility attributes.
  • •Lack of awareness about SVG accessibility requirements.

How to fix it

For each SVG, determine if it conveys meaning. If yes, add a <title> as the first child or an aria-label on the <svg>. If purely decorative, set aria-hidden="true" and focusable="false". Optionally, use role="img" with an accessible name for meaningful SVGs.

Code examples

Problem: SVG without accessible name

<svg width="24" height="24"><path d="..."/></svg>

Fix: Add a <title> for meaningful SVG

<svg width="24" height="24"><title>Download</title><path d="..."/></svg>

Fix: Use aria-label for meaningful SVG

<svg width="24" height="24" aria-label="Download"><path d="..."/></svg>

Fix: Decorative SVG with aria-hidden

<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="..."/></svg>

FAQ

How do I know if an SVG needs an accessible name?

If the SVG conveys information or meaning (like an icon or illustration), it needs an accessible name. If it's purely decorative, use aria-hidden="true".

Can I use aria-label instead of a <title> element?

Yes, aria-label on the <svg> is an acceptable alternative to a <title> for providing an accessible name.

What happens if I do nothing?

Screen readers may skip the SVG or read its path data, confusing users and reducing accessibility.

Is role="img" required for SVG accessibility?

role="img" is optional but can help clarify the SVG's purpose when paired with an accessible name.

Found this issue on your site?

Run a scan to see if Inline SVGs Missing Accessible Name affects your pages.

Scan my website →