Why does an inline SVG need role equals img?

Browsers expose inline SVG inconsistently, sometimes as a group of shapes rather than a single image. Adding role equals img collapses it into one accessible image so a screen reader announces the title once instead of reading individual paths.

Is aria-label enough, or do I need a title element?

An aria-label on the svg works and the tool accepts it. The most robust and widely supported pattern, however, is a title element referenced by aria-labelledby, because some assistive technologies read the title element more reliably than aria-label on SVG.

What makes an SVG decorative and how do I mark it?

An SVG is decorative when it adds no information beyond adjacent text, such as an icon next to a visible label. Mark it with aria-hidden equals true so it is removed from the accessibility tree, and make sure it has no title or aria-label that would contradict that.

What is the desc element for?

The desc element holds a longer description for complex graphics such as charts or diagrams. It is optional for simple icons. The title is the short accessible name and the desc supplements it with detail when needed.

Does my SVG get uploaded?

No. The SVG is parsed in your browser using the built-in DOM parser. Nothing you paste is sent to a server, so internal or unreleased assets are safe to test.

SVG Accessibility Checker

Inline SVG icons are everywhere, and they are one of the most commonly missed accessibility cases. An SVG with no name is announced as nothing useful, while a decorative SVG that is not hidden floods a screen reader with shape data. This tool inspects a pasted SVG, decides which pattern it should follow, and checks that the required markup is present.

How it works

The tool parses your SVG with the browser’s XML parser, falling back to the HTML parser, and inspects the root svg element. It first decides the intended pattern:

Decorative — the root has aria-hidden="true" or role="presentation"/role="none". The tool confirms it is hidden and warns if a stray title or aria-label would leak a name.
Informative — anything else. The tool runs the accessible-name checks below.

For an informative SVG it verifies, in line with WCAG 1.1.1:

role="img" on the root, so the graphic is exposed as a single image.
A non-empty title element, which is the short accessible name.
aria-labelledby on the root referencing the title element’s id, so the name is announced reliably (an aria-label is accepted as an alternative).
A resolvable accessible name overall.
An optional desc element for longer descriptions.

Example

<svg role="img" aria-labelledby="t">
  <title id="t">Download file</title>
  <path d="M12 3v12 ..."/>
</svg>

This passes: role="img" makes it one image, the title provides the name “Download file”, and aria-labelledby wires the two together. Remove the title and the icon becomes a nameless graphic.

Tips and notes

Give each title a unique id and reference exactly that id from aria-labelledby; a mismatch silently breaks the name.
Decorative icons that sit next to visible text should be hidden with aria-hidden="true" rather than given a redundant name, to avoid double announcements.
Use desc only when a short title is not enough, for example a data chart, and keep the title concise.
All parsing happens locally in your browser; the markup never leaves the page.