svgsvgsvg.com

SVG Accessibility Checker

Paste SVG markup and get a report of missing title, role, aria-*, and other accessibility attributes — with explanations, fix suggestions, and an auto-fixed output. Runs entirely in your browser.

Informative vs decorative SVGs

Every SVG falls into one of two categories. An informative SVG conveys meaning on its own — a logo, an icon that stands alone, a chart — and needs a <title>, role="img", and aria-labelledby. A decorative SVG is purely visual and its meaning is already conveyed by adjacent text — it should be hidden from screen readers entirely with aria-hidden="true".

The correct ARIA pattern for informative SVGs

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
     role="img" aria-labelledby="icon-title" focusable="false">
  <title id="icon-title">Home</title>
  <!-- paths -->
</svg>

Frequently Asked Questions

Why does aria-labelledby matter if <title> already exists?+

The SVG <title> element is only read automatically by a subset of screen readers. VoiceOver on macOS and iOS, for example, ignores it unless the <svg> element explicitly references it via aria-labelledby. Adding aria-labelledby makes the accessible name reliable across all major screen reader + browser combinations.

What does focusable="false" do?+

In Internet Explorer and legacy Edge, <svg> elements are keyboard-focusable by default — they appear in the tab order even when they are purely decorative. Setting focusable="false" removes them. Modern browsers do not have this issue, but adding the attribute is harmless and ensures older browser compatibility.

Should every icon have a <title>?+

Only informative icons — those that convey meaning not available from surrounding text. If an icon sits next to a visible label (e.g. a search icon beside the word "Search"), the icon is decorative and should be hidden with aria-hidden="true". Adding a redundant title would cause screen readers to announce the label twice.

Is my SVG sent to a server?+

No. All parsing and checking happens in your browser using the DOM parser. Your SVG markup never leaves your device.

Related Tools

SVG to React Component
Convert SVG markup into a React function component with JSX attributes, forwarded props, and optional TypeScript types.
→
SVG Sprite Packer
Combine multiple SVG icons into a single sprite with <symbol> elements and <use> snippets — paste SVGs one at a time, get a ready-to-paste sprite SVG.
→
SVG Optimizer
Remove comments, metadata, and redundant attributes from SVG markup. Minify or format the result — no upload required.
→

How to use

  • Paste your SVG markup — the checker reports issues instantly with severity, explanations, and fix snippets.
  • Issues marked Error or Warning should be resolved; Suggestions are optional improvements.
  • If auto-fixable issues are found, a Fixed SVG output appears with the changes applied — review it, fill in any TODO text, and copy.
  • SVGs with aria-hidden="true" or role="presentation" are checked against the decorative pattern instead.