Textalternativen

SVG-Grafiken brauchen einen Namen

Regel: svg-img-alt
Schweregrad: Schwerwiegend
WCAG-Stufe A

Warum das wichtig ist

Ein <svg> mit role="img" wird als Bild ohne Beschreibung angesagt; ein Inline-Icon oder ein Diagramm vermittelt damit nichts.

So beheben Sie es

Ergänzen Sie ein <title>-Element als erstes Kind des <svg>.
Oder setzen Sie aria-label auf das <svg> selbst.
Bei einem dekorativen Icon neben sichtbarem Text entfernen Sie role="img" und setzen stattdessen aria-hidden="true".

Im Markup

Fehlerhaft

<svg role="img" viewBox="0 0 24 24">
  <path d="..."/>
</svg>

Korrekt

<svg role="img" viewBox="0 0 24 24">
  <title>Download</title>
  <path d="..."/>
</svg>

Die Anforderung dahinter

Diese Regel ist eine Art, die folgenden WCAG-2.2-Erfolgskriterien zu verfehlen. Das W3C, das den Standard herausgibt, erläutert jedes davon:

1.1.1 Nicht-Text-Inhalte (öffnet in neuem Tab) — WCAG-Stufe A

Weiterführende Quellen

Deque University zu svg-img-alt (öffnet in neuem Tab)

Deque entwickelt axe-core, die quelloffene Prüf-Engine unseres Scanners. Ihre Seite dokumentiert die Regel so, wie die Engine sie umsetzt.

Automatische Prüfungen finden Fehler, die ein Browser nachweisen kann. Ob eine Untertitelspur inhaltlich stimmt, ob ein Alternativtext wirklich hilft oder ob sich eine Seite durchgängig mit der Tastatur bedienen lässt, kann nur ein Mensch beurteilen.