Barrierefreiheit

SVG-Grafiken ohne zugänglichen Namen

Üblicher Schweregrad: mittel · Aufwand: gering

Woran du es erkennst

Inline-SVGs oder per <img> eingebundene SVG-Grafiken mit Bild-Charakter haben weder alt-Text noch role="img" mit aria-label (axe-Regeln svg-img-alt, role-img-alt).

Warum es zählt

Icons und Illustrationen tragen oft die eigentliche Information (Warenkorb, Download, Warnung) — ohne zugänglichen Namen hören Screenreader-Nutzer nur „Grafik" oder gar nichts und verpassen Funktion oder Inhalt.

So behebst du es

  1. Gib informativen SVGs role="img" und ein aria-label (oder <title> im SVG), das ihre Bedeutung beschreibt, z. B. aria-label="Warenkorb, 3 Artikel".
  2. Verstecke rein dekorative SVGs mit aria-hidden="true" und focusable="false", statt Screenreader mit leeren Grafiken zu belasten.
  3. Prüfe Icon-Fonts und SVG-Sprites in der zentralen Icon-Komponente — ein Fix dort wirkt auf die ganze Seite.

Zum Nachlesen