Aria Label Svg

title: "ARIA Label for SVG — Labeling Inline SVGs with aria-label" description: "Learn how to use aria-label and aria-labelledby to provide accessible names for inline SVG graphics and icons." weight: 4 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, svg]

aria-label and aria-labelledby provide accessible names for inline SVGs when a visible title element is not desired or when simpler markup is preferred.

## What You'll Learn

How to use aria-label and aria-labelledby for SVGs and when to choose each.

## Why It Matters

aria-label is simpler than a title element with aria-labelledby references. It provides a direct accessible name without extra elements.

## Real-World Use

An icon SVG for a print button has role="img" and aria-label="Print this page". The screen reader announces "Print this page, image, button."

## aria-label on SVG

```html
<!-- Simple icon with aria-label -->
<svg role="img" aria-label="Search" width="24" height="24"
     viewBox="0 0 24 24">
  <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>

<!-- With title as fallback -->
<svg role="img" aria-label="Close dialog" width="20" height="20"
     viewBox="0 0 20 20">
  <title>Close</title>
  <path d="M15 5L5 15M5 5l10 10" stroke="currentColor" stroke-width="2"/>
</svg>

<!-- aria-labelledby referencing visible text -->
<h2 id="chart-heading">Revenue by quarter</h2>
<svg role="img" aria-labelledby="chart-heading" viewBox="0 0 400 200">
  <!-- chart content -->
</svg>

Common Mistakes

1. aria-label without role=img

aria-label works but role='img' is needed for SVG to be treated as an image.

2. aria-label text too long

Keep aria-label concise (under 125 characters). Use a separate description for longer text.

3. aria-label that duplicates visible text

If the SVG is next to text that already describes it, use aria-hidden on the SVG.

4. aria-labelledby with non-existent id

The referenced id must exist on the page. Verify all aria-labelledby references.

5. aria-label on decorative SVG

Decorative SVGs should use aria-hidden="true", not aria-label.

Practice Questions

1. What attribute provides a direct accessible name on an SVG? aria-label on the SVG element provides the accessible name directly.

2. When should you use aria-labelledby instead of aria-label? When the label already exists as visible text on the page that the SVG should reference.

3. Can an SVG have both aria-label and title? Yes. aria-label takes priority. The title serves as fallback for users who see tooltips.

Challenge: Create an SVG that uses aria-labelledby to reference a visible heading as its accessible name.

FAQ

Mini Project

Create an SVG icon set for a toolbar (Bold, Italic, Underline, Align Left, Align Center). Use aria-label on each SVG for accessible names.

What's Next

Learn about Accessible Charts and how to make data visualizations accessible with data tables.