How to Use role=“img” for Accessible SVG Icons

This article provides a practical guide on applying the role="img" attribute to inline Scalable Vector Graphics (SVGs) to improve web accessibility. You will learn why role="img" is necessary for assistive technologies, how to properly label informative icons, and how to differentiate between meaningful graphics and decorative elements.

Why Use role=“img” on SVG Elements

Browsers and screen readers do not always handle inline <svg> elements consistently. Some screen readers may ignore an SVG entirely, while others might traverse the internal DOM nodes (such as <path>, <circle>, or <g>) and announce confusing data to users.

Applying role="img" explicitly defines the <svg> element as an image within the accessibility tree. This instructs assistive software to treat the entire vector graphic as a single, cohesive image rather than a collection of vector shapes.

Implementing role=“img” for Informative Icons

When an icon conveys information, meaning, or context that is not accompanied by visible text, it must have role="img" along with an accessible name.

Method 1: Using aria-label

For simple icons, add role="img" along with an aria-label directly on the <svg> tag.

<svg role="img" aria-label="Settings" viewBox="0 0 24 24" width="24" height="24">
  <path d="M12 15.5A3.5 3.5 0 0 1 8.5 12..." />
</svg>

Method 2: Using <title> and aria-labelledby

For better compatibility and localized support, use an internal <title> element referenced by aria-labelledby.

<svg role="img" aria-labelledby="settings-icon-title" viewBox="0 0 24 24" width="24" height="24">
  <title id="settings-icon-title">Account Settings</title>
  <path d="M12 15.5A3.5 3.5 0 0 1 8.5 12..." />
</svg>

When to Avoid role=“img”: Decorative Icons

If an icon is purely visual, accompanies adjacent text describing the same action, or does not add any standalone value, do not use role="img". Instead, hide the SVG completely from screen readers using aria-hidden="true".

<button type="button">
  <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" width="16" height="16">
    <path d="M19 6.41L17.59 5 12 10.59..." />
  </svg>
  <span>Close</span>
</button>

Summary of Best Practices

  1. Only use role="img" on meaningful icons: Combine it with either an aria-label or an internal <title> linked via aria-labelledby.
  2. Hide decorative icons: Use aria-hidden="true" and omit role="img" when visible text already explains the element.
  3. Prevent keyboard focus issues: Older versions of Internet Explorer make SVGs focusable by default; add focusable="false" to SVG tags to maintain predictable tab navigation.