Role Img Svg

title: "Role img for SVG — Making SVGs Recognizable as Images" description: "Learn how role=img on SVG elements tells screen readers to treat SVGs as images rather than reading their internal elements as code." weight: 3 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, svg]

Adding role="img" to an inline SVG tells screen readers to treat the entire SVG as a single image rather than navigating its internal elements.

## What You'll Learn

Why role="img" is essential for SVGs and how it changes screen reader behavior.

## Why It Matters

Without role="img", screen readers may enter the SVG and read path data, circle coordinates, and other internal markup as text.

## Real-World Use

An inline SVG icon has role="img" and aria-label="Search". The screen reader announces "Search, image" instead of reading the SVG path data as code.

## Role img

```html
<!-- Informative SVG -->
<svg role="img" aria-label="Company logo"
     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50">
  <rect width="200" height="50" fill="#0066cc" rx="5"/>
  <text x="20" y="35" fill="#fff" font-size="24">DodaTech</text>
</svg>

<!-- Decorative SVG -->
<svg role="presentation" aria-hidden="true" focusable="false">
  <circle cx="50" cy="50" r="40" fill="#f0f0f0"/>
</svg>

Presentation vs Img

Use role="presentation" combined with aria-hidden="true" for decorative SVGs that add no information.

Common Mistakes

1. No role attribute on inline SVGs

Without role, screen readers may drill into SVG internals.

2. role="img" on decorative SVGs

Decorative SVGs should use role="presentation" with aria-hidden="true".

3. role="img" without accessible name

role="img" alone is not enough. The SVG must also have aria-label or aria-labelledby.

4. role="presentation" on informative SVGs

Informative SVGs need role="img" to be recognized as images.

5. Redundant role on SVGs inside alt-tagged img

If SVG is in an img element, the img handles accessibility directly.

Practice Questions

1. What role makes a screen reader treat an SVG as an image? role="img" creates a single image in the accessibility tree.

2. What should decorative SVGs use instead of role=img? role="presentation" with aria-hidden="true" to hide from screen readers.

3. What happens to an SVG without role=img? Screen readers may enter the SVG and read internal elements (path data, shapes) as text.

Challenge: Find a page with inline SVGs. Check if they have role="img" (informative) or role="presentation" (decorative). Fix any incorrect roles.

FAQ

Mini Project

Create a page with three SVGs: a decorative background pattern, an informative icon, and an interactive chart. Apply correct roles to each.

What's Next

Learn about ARIA Label for SVG and how to use aria-label effectively on inline SVGs.