SVG Accessibility Guidelines for Screen Readers

SVGs are a powerful tool for scalable, crisp graphics on the web. When used thoughtfully, they become accessible to screen readers and assistive technologies, not just visually appealing off-canvas art. This guide offers practical steps for frontend developers and designers to make SVGs inclusive, with concise code examples and links to SV Genius resources for deeper dives.

Understand when to expose or hide SVG content

Not every SVG needs to be read by a screen reader. Decorative or purely visual icons should be hidden from assistive tech to avoid noise. Use the following approach:

• Use aria-hidden="true" on decorative SVGs.
• Provide meaningful text for informative icons, logos, or controls.

Example of a decorative icon:

<svg width="24" height="24" aria-hidden="true" role="img" ></svg>

Example of an informative icon with accessible text:

<svg width="24" height="24" aria-labelledby="iconTitle iconDesc" role="img">
  <title id="iconTitle">Search</title>
  <desc id="iconDesc">Icon indicates a search action</desc>
  <path d="..."/>
</svg>

Provide meaningful accessible names with title and desc

Screen readers rely on text to convey meaning. For informative SVGs, attach title and desc and reference them with aria-labelledby. This makes complex graphics understandable without needing to view them.

Key pattern to copy:

<svg width="120" height="60" role="img" aria-labelledby="svgTitle svgDesc">
  <title id="svgTitle">Company logo</title>
  <desc id="svgDesc">Blue shield icon representing trust and protection</desc>
  <rect width="120" height="60" fill="#0a6bd8"/>
  <path d="..."/>
</svg>

Tip: for simple icons, a short accessible label on a wrapping element can be enough, e.g. aria-label="Search" role="img".

Use aria-labelledby vs aria-label appropriately

When you have a complex SVG with several parts, prefer aria-labelledby to expose structured text in a logical order. For single, concise icons, aria-label is simpler and effective. The rule of thumb:

• Single-purpose icons: aria-label="Settings".
• Complex illustrations: wrap with aria-labelledby referencing a <title> and optional <desc>.

Ensure accessible focus and keyboard operability

SVGs embedded as interactive controls (buttons, toggles, etc.) must be keyboard accessible and clearly announced. If an SVG acts as a button or control, treat it as a real HTML control or give it role="button" and an accessible name. Prefer native elements when possible, and only enhance with SVGs when needed.

Example of an accessible icon button:

<button aria-label="Play" class="icon-button">
  <svg width="16" height="16" aria-hidden="true"><!-- purely decorative here --></svg>
</button>

Describe text alternatives for text-containing SVGs

If your SVG contains text elements, screen readers may read the text differently across engines. A robust approach is to provide a textual fallback or an accessible label outside the SVG while keeping the graphic intact for visual users.

Minimal inline example with text alternative:

<svg width="200" height="100" role="img" aria-labelledby="title desc">
  <title id="title">Profile summary</title>
  <desc id="desc">A graphic illustrating a user profile summary</desc>
  <rect width="200" height="100" fill="#f0f0f0"/>
  <text x="20" y="50" fill="#333">Profile</text>
</svg>

Accessible SVGs in the real world: logos, icons, and illustrations

Logos are often decorative for screen readers but can also carry brand identity. Decide on a consistent approach across your site:

• Brand logos that link to the homepage can use a hidden <span class="sr-only">Company name</span> for non-visual readers while the SVG remains decorative with aria-hidden="true" if the text already appears as a visible label nearby.
• Informational icons (i.e., “download”, “upload”) should have clear labels via aria-label or aria-labelledby.
• Illustrations with multiple parts may benefit from a short description via a <desc> that summarizes the scene.

Practical snippets you can reuse

Here are compact, reusable patterns to copy into your projects. Adapt the sizes and colors to fit your design system.

Icon button with accessible name and hidden decorative SVG:

<button class="icon" aria-label="Close" >
  <svg width="16" height="16" aria-hidden="true"><!-- decorative --></svg>
</button>

Complex illustrative SVG with title/desc and aria-labelledby:

<svg width="240" height="120" role="img" aria-labelledby="illusTitle illusDesc">
  <title id="illusTitle">Monthly Revenue Overview</title>
  <desc id="illusDesc">Graphic showing revenue growth over the last year</desc>
  <rect width="240" height="120" fill="#fff"/>
  <path d="M10 100 L40 70 L70 90 L100 40" fill="none" stroke="#0a6bd8"/&