Svg A11Y

title: "SVG Accessibility — Making Inline SVGs Accessible with role and aria-label" description: "Learn how to make inline SVG graphics accessible using role=img, aria-label, and title elements for screen reader users." weight: 7 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, images]

Inline SVGs need role="img" and an accessible label (aria-label or title) to be recognized as images by screen readers.

## What You'll Learn

How to make inline SVGs accessible, including decorative SVGs, icon SVGs, and complex illustrative SVGs.

## Why It Matters

Inline SVGs have no native alt attribute. Without explicit accessibility markup, screen readers either ignore them or announce their contents as code.

## Real-World Use

An icon SVG in a button has role="img" and aria-label="Search". The screen reader announces "Search, button" instead of reading the SVG path data.

## SVG Markup

```html
<!-- Simple icon SVG -->
<svg role="img" aria-label="Search" width="24" height="24" viewBox="0 0 24 24">
  <title>Search</title>
  <circle cx="10" cy="10" r="7" fill="none" stroke="currentColor" stroke-width="2"/>
  <line x1="15" y1="15" x2="21" y2="21" stroke="currentColor" stroke-width="2"/>
</svg>

<!-- Decorative SVG -->
<svg role="img" aria-hidden="true" focusable="false">
  <circle cx="50" cy="50" r="40" fill="#f0f"/>
</svg>

<!-- Complex SVG with title and description -->
<svg role="img" aria-labelledby="svg-title svg-desc" xmlns="http://www.w3.org/2000/svg">
  <title id="svg-title">Company organization chart</title>
  <desc id="svg-desc">Hierarchical org chart showing CEO at top with three VPs reporting</desc>
  <!-- SVG content -->
</svg>

Focusable SVG

<!-- Interactive SVG needs to be focusable -->
<svg role="img" aria-label="Interactive map" focusable="true"
     tabindex="0" aria-describedby="map-desc">
  <!-- interactive elements -->
</svg>

Common Mistakes

1. No role="img" on inline SVGs

Without role="img", screen readers may read the SVG as code.

2. Missing aria-label on icon SVGs

Screen readers cannot identify the purpose of an icon SVG without a label.

3. Not hiding decorative SVGs

Decorative SVGs must use aria-hidden="true" to prevent announcement.

4. SVG not focusable when interactive

Interactive SVGs need focusable="true" and tabindex="0" for keyboard focus.

5. Title element without aria-labelledby

The title element inside SVG is not automatically exposed. Use aria-labelledby to reference it.

Practice Questions

1. What role should an inline SVG have? role="img" tells screen readers the SVG functions as an image.

2. How do you label an icon SVG? Use aria-label on the SVG element or aria-labelledby referencing a title element.

3. How do you hide a decorative SVG from screen readers? Add aria-hidden="true" and role="presentation" to the SVG.

Challenge: Create an inline SVG icon for a "Settings" button. Use role="img" and aria-label. Test with a screen reader.

FAQ

Mini Project

Create three SVGs: a decorative background SVG, an icon SVG for a button, and an illustrative SVG with title and description.

What's Next

Learn about Icon Accessibility and how to handle icon fonts and SVG icons in accessible ways.