SVG-Grafik ohne Textalternative (svg-img-alt)

Die Regel svg-img-alt meldet eingebettete <svg>-Elemente, die sich als Bild ausgeben – mit role="img" oder einer Grafik-Rolle –, aber keinen zugänglichen Namen haben. Ein Screenreader sagt dann „Grafik“ und sonst nichts. Die Lösung ist ein <title> als erstes Kind des SVG oder ein aria-label, das sagt, was die Grafik bedeutet.

Was die Regel bedeutet

Eingebettetes SVG hat kein alt-Attribut. Wird ein Logo, ein Icon oder ein Diagramm als <svg> gezeichnet und mit role="img" versehen, muss die Textalternative anders hinein. axe akzeptiert:

• ein nicht leeres <title>-Element als direktes Kind des <svg>,
• aria-label oder aria-labelledby,
• ein title-Attribut.

Geprüft werden <svg>-Elemente mit den Rollen img, graphics-document oder graphics-symbol. Ein <title> innerhalb einer <g>-Gruppe, ein leeres <title></title> oder ein <desc> allein zählen nicht.

Zwei Dinge sieht die Regel nicht. Ein SVG ohne eine dieser Rollen wird gar nicht geprüft – trägt es Bedeutung und hat keinen Namen, muss ein Mensch das finden. Und ob der Name stimmt, kann axe nicht beurteilen: <title>icon-cart</title> besteht.

Wen es betrifft

Blinde Menschen mit Screenreader hören „Grafik“, wo Sehende ein Firmenlogo, ein Warnsymbol oder ein Diagramm sehen. Sehbehinderte Menschen, die Vergrößerung und Screenreader kombinieren, verpassen dieselbe Information. Ist das SVG der einzige Inhalt eines Links oder Buttons, hat auch das Bedienelement keinen Namen, und wer per Sprache steuert, kann es nicht ansprechen.

Warum die Prüfung anschlägt

• Icon-Systeme und Sprites – <svg role="img"><use href="#icon-warenkorb"></use></svg> –, bei denen die Komponente die Rolle setzt, der Titel aber nie übergeben wird.
• Logos aus einem Design-Werkzeug, von Hand mit role="img" versehen, aber ohne <title>.
• Ein <title> an der falschen Stelle – in einer <g>-Gruppe – oder ein leeres, das ein Export hinterlassen hat.
• Diagramme und Karten, die eine Bibliothek als SVG ausgibt: Die Rolle ist gesetzt, die Beschreibung bleibt der Entwicklung überlassen.
• Barrierefreiheits-Linter, die role="img" empfehlen – und danach passiert nichts mehr.

So beheben Sie es

1. Trägt das SVG Information, setzen Sie ein <title> als erstes Kind und verbinden es per aria-labelledby – diese Kombination wird in Browsern und Screenreadern zuverlässig gelesen.
2. Bei einem Icon in einem Button oder Link benennen Sie das Bedienelement und verbergen das SVG.
3. Ist das SVG Dekoration, entfernen Sie die Rolle und setzen aria-hidden="true" und focusable="false".

<!-- Vorher: ein SVG-Logo, angesagt nur als „Grafik“ -->
<a class="logo" href="/">
  <svg role="img" viewBox="0 0 24 24" width="48" height="48">
    <path d="M12 2 2 22h20z" fill="#1d4ed8"/>
  </svg>
</a>

<!-- Nachher: title als erstes Kind, verbunden per aria-labelledby -->
<a class="logo" href="/">
  <svg role="img" aria-labelledby="logo-titel" viewBox="0 0 24 24" width="48" height="48">
    <title id="logo-titel">Beispiel GmbH – Startseite</title>
    <path d="M12 2 2 22h20z" fill="#1d4ed8"/>
  </svg>
</a>

Ein dekoratives Icon neben sichtbarem Text wird verborgen; der Button heißt wie sein Text:

<button type="button" class="btn-warenkorb">
  <svg aria-hidden="true" focusable="false" width="16" height="16"><use href="#icon-warenkorb"></use></svg>
  Warenkorb
</button>

So prüfen Sie es von Hand

1. Suchen Sie im Elemente-Bereich nach <svg und notieren Sie, welche eine Rolle haben.
2. Wählen Sie jedes aus und lesen Sie die Zeile „Name“ im Bereich „Barrierefreiheit“ (Chrome, Edge) bzw. im Barrierefreiheits-Inspektor von Firefox.
3. Prüfen Sie auch die SVGs ohne Rolle: Vermittelt eines davon etwas – einen Status, ein Diagramm, einen Logo-Link –, ohne Namen zu haben? Diese Regel findet solche Fälle nicht.
4. Hören Sie mit NVDA oder VoiceOver nach: Informative Grafiken werden mit ihrer Bedeutung angesagt, dekorative gar nicht.

Zugehöriges WCAG-Kriterium

1.1.1 Nicht-Text-Inhalt, Stufe A. Verwandt: 4.1.2 Name, Rolle, Wert, wenn das SVG der einzige Inhalt eines Buttons oder Links ist, und 1.4.11 Nicht-Text-Kontrast für Icons, die man sehen muss, um sie zu verstehen.

So meldet Reviseberg diese Regel

Reviseberg führt svg-img-alt auf jeder gecrawlten Seite bei 1280 px aus. Die Befundliste zeigt die Regel mit Schweregrad, WCAG-Kriterium und Stufe, der Zahl der betroffenen SVGs und Seiten und den Punkten, die ein Fix zurückbringt. Eine Logo- oder Icon-Komponente im Header erzeugt einen Befund pro Seite. Die Detailansicht – CSS-Selektor, HTML-Ausschnitt, jede betroffene Seite – führt deshalb meist direkt zu einer einzigen Komponente.

Befunde können Sie mit Begründung als „ignorieren“, „nicht behebbar“ oder „Fehlalarm“ markieren; jede Entscheidung wird protokolliert. Ein sauberes Ergebnis markiert 1.1.1 nie allein als bestanden: SVGs ohne Rolle und Namen, die zwar da, aber falsch sind, prüft ein Mensch.

Verwandte Regeln

• undefined – dasselbe Problem bei HTML-Elementen mit role="img".
• undefined – <img>-Elemente, auch SVG-Dateien, die per <img src="….svg"> eingebunden sind.
• undefined – ein Link, dessen einziger Inhalt ein unbenanntes SVG ist.
• undefined – ein Icon-Button ohne zugänglichen Namen.

Icons und Logos auf Textalternativen prüfen – kostenloser Scan