SVG-Barrierefreiheit: Vektorgrafiken inklusiv gestalten

WCAG 2.1 Anforderungen:
- Nicht-textuelle Inhalte benötigen Alternativen
- Farbe nicht als einziges Informationsmittel
- Ausreichender Farbkontrast
- Skalierbar ohne Verlust
- Fokussierbare Elemente per Tastatur erreichbar

<svg aria-hidden="true" focusable="false">
  <!-- dekorative Grafik -->
</svg>

<svg role="img" aria-labelledby="chart-title">
  <title id="chart-title">Umsatzwachstum 2025</title>
  <!-- Diagramminhalt -->
</svg>

<svg role="img" aria-labelledby="title desc">
  <title id="title">Organigramm</title>
  <desc id="desc">
    Hierarchische Struktur mit CEO an der Spitze,
    drei VPs darunter, jeweils mit Teams.
  </desc>
  <!-- komplexes Diagramm -->
</svg>

<!-- Rollendefinition -->
role="img"           <!-- statisches Bild -->
role="graphics-document"  <!-- komplex interaktiv -->

<!-- Labels -->
aria-label="..."     <!-- einfache Beschreibung -->
aria-labelledby="..." <!-- Verweis auf Titelelement -->
aria-describedby="..." <!-- detaillierte Beschreibung -->

<!-- Zustände -->
aria-hidden="true"   <!-- vor AT verbergen -->
focusable="false"    <!-- Fokus verhindern -->

<svg role="img" aria-labelledby="icon-title icon-desc">
  <title id="icon-title">Warnung</title>
  <desc id="icon-desc">
    Gelbes Dreieck mit Ausrufezeichen als Warnung
  </desc>
  <path d="..."/>
</svg>

<svg>
  <a href="/section-1" tabindex="0">
    <rect x="0" y="0" width="100" height="50"/>
    <text>Abschnitt 1</text>
  </a>
</svg>

svg a:focus,
svg [tabindex]:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

svgElement.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    // Element aktivieren
  }
});

Mindestanforderungen:
Text: 4.5:1 (normal), 3:1 (groß)
Grafiken: 3:1 gegen Hintergrund
UI-Komponenten: 3:1

<!-- Schlecht: Nur Farbe -->
<circle fill="red"/>  <!-- Fehler -->
<circle fill="green"/>  <!-- Erfolg -->

<!-- Gut: Muster + Farbe -->
<circle fill="red">
  <title>Fehler</title>
</circle>
<use href="#checkmark" fill="green">
  <title>Erfolg</title>
</use>

<button aria-label="Dialog schließen">
  <svg aria-hidden="true" focusable="false">
    <path d="..."/>
  </svg>
</button>

<button>
  <svg aria-hidden="true"><!-- Icon --></svg>
  Dokument speichern
</button>

<svg role="img" aria-label="Benachrichtigung: 3 ungelesene Nachrichten">
  <circle cx="12" cy="12" r="10" fill="#ff0000"/>
  <text x="12" y="16" text-anchor="middle">3</text>
</svg>

@media (prefers-reduced-motion: reduce) {
  svg * {
    animation: none !important;
    transition: none !important;
  }
}

<button id="toggle-animation">
  Animation pausieren
</button>

<svg class="animated-svg">
  <!-- animierter Inhalt -->
</svg>

<a href="/">
  <svg role="img" aria-label="Firmenname - Startseite">
    <title>Firmenlogo</title>
    <!-- Logo-Pfade -->
  </svg>
</a>

<svg role="img" aria-labelledby="chart-title">
  <title id="chart-title">Monatsumsätze 2025</title>
  <desc>Balkendiagramm mit steigenden Umsätzen
        von 10.000 € im Januar auf 45.000 € im Dezember</desc>

  <!-- Alternativ-Tabelle bereitstellen -->
</svg>
<table class="sr-only">
  <!-- barrierefreie Datentabelle -->
</table>

<svg class="icon" aria-hidden="true" focusable="false">
  <use href="#icon-search"/>
</svg>
<span class="icon-label">Suchen</span>