Published on

What is `role="img"` in an SVG tag?

Authors
  • avatar
    Name
    hwahyeon
    Twitter

SVG elements can have various role values. To explicitly indicate that an SVG is an image and make it recognizable to assistive technologies, use role="img". You can further improve accessibility by adding attributes like aria-label or title to describe the image's purpose for users relying on assistive tools.

If the SVG is purely decorative and does not convey information, it's better to use aria-hidden="true" instead of adding aria-label or title. This ensures that screen readers ignore the element and its child elements, avoiding unnecessary information for users.