SVG-Barrierefreiheit: title, desc und Struktur validieren ohne Optimierung zu brechen
Dekorative vs. informative Icons: WCAG-Regeln, title/desc-Tags und schnelle Online-Validierung.
Warum SVG-Barrierefreiheit vor der Optimierung zählt
Ein um 60 % optimiertes SVG nützt nichts, wenn ein Screenreader „Bild“ ohne Kontext ansagt oder ein dekoratives Icon die Sprachnavigation stört. WCAG unterscheidet dekorative SVG (vor assistiven Technologien verborgen) von informativen SVG (Titel oder Beschreibung erforderlich). Der Online-SVG-Validator von FastMinify prüft Syntax, viewBox-Präsenz und fehlende <title> / <desc> — mit Hinweiswarnungen, kein vollständiges WCAG-Audit. Alles läuft im Browser im SVG-Tools-Hub, vor oder nach optimize SVG. Für SVGO-Preset-Kontext siehe SVGO-Presets erklärt.
Konkrete Beispiele: UI-Icons und Inline-SVG
Ein „Löschen“-Button mit Papierkorb-SVG links vom Text: SVG erhält <code>aria-hidden="true"</code>, kein title. validate-svg zeigt title/desc-Warning — erwartet. Barrierefreiheit liegt im Button-Text, nicht im Icon.
Before optimization
After optimization
Ein Erfolgs- oder Fehler-Badge nur als SVG braucht <code><title>Erfolg</title></code> oder explizites <code>aria-label</code> auf der Komponente. validate-svg bestätigt Textpräsenz; danach Tastatur und Screenreader testen.
Best Practices: WCAG, Optimize und Design System
validate-svg in Asset-Review einbinden — besonders bei Icons von Designern ohne AT-Tests.
Aggressive-Preset kann Pfade mergen oder IDs entfernen — selten title/desc, aber visuell vergleichen. svg-to-jsx behält Markup; prüfen, dass title/desc erste Kinder von <svg> in der React-Komponente bleiben.
FastMinify validate-svg ist ein strukturelles Sicherheitsnetz, kein Ersatz für ein vollständiges Seiten-Audit. Kontrast, Tastaturfokus, Tab-Reihenfolge und lange Alternativen bleiben Ihre Verantwortung oder die dedizierter Tools.
Wann das Browser-Tool reicht
Kein svgo-cli oder schwerer a11y-Linter nötig, um einen Figma-Export vor dem Merge zu prüfen.
Mit CI und AT-Audits ergänzen
Automatisierte Seitentests (Pa11y, axe-core in CI, Lighthouse Accessibility) decken gerendertes DOM ab — nicht nur die SVG-Quelldatei. validate-svg upstream auf Assets; E2E mit Screenreadern für kritische Flows.
Gleiches SVGO-Preset in Browser-Vorschau und CI. Nach Pipeline-optimize Stichprobe manuell in validate-svg — siehe <a href="/de/blog/svgo-presets-svg-web-optimieren" class="text-primary hover:underline">SVGO-Presets</a> und den <a href="/de/blog/svg-optimization-leitfaden-web" class="text-primary hover:underline">SVG-Optimierungsleitfaden</a>.
Ergänzende Tools
FastMinify validate-svg zielt auf SVG-Quell-Markup. Andere Tools decken gerenderte Seiten oder breitere Standards ab.
FastMinify validate-svg
XML-Syntax, viewBox, title/desc — Browser, ohne Konto.
Pros:
Cons:
axe DevTools / WAVE
Browser-Erweiterungen für DOM-Barrierefreiheits-Audit.
Pros:
Cons:
SVGO + manuelle Validierung
Klassische CLI-Pipeline ohne validate-svg.
Pros:
Cons:
Dekorativ vs. informativ: Grundlagen
Ein Icon neben sichtbarem Text („Speichern“, „Schließen“) liefert keine Zusatzinformation — rein visuell. WCAG empfiehlt <code>aria-hidden="true"</code> auf <code><svg></code> oder gleichwertiges <code>role="presentation"</code>. Dann sind <code><title></code> und <code><desc></code> unnötig — sogar kontraproduktiv, wenn sie angrenzenden Text duplizieren.
Ein alleinstehendes Piktogramm (Fehlerstatus ohne Text, Inline-Diagramm, Logo-Link ohne Text-Alt) muss Bedeutung vermitteln. Optionen: <code><title></code> und optional <code><desc></code> als erste Kinder von <code><svg></code>, oder <code>role="img"</code> + <code>aria-label</code> / <code>aria-labelledby</code> auf SVG oder React-Wrapper.
Das Tool parst XML-Markup, verlangt <code><svg></code>-Root, meldet fehlende <code>viewBox</code> (Warning) und fehlenden Text in <code><title></code> oder <code><desc></code> (Warning). Das sind grundlegende Strukturchecks — keine Screenreader-Simulation, kein Farbkontrast, keine komplexe ARIA-Validierung. Für ein vollständiges Audit ergänzen Sie axe DevTools oder WAVE.
FastMinify-Workflow: validieren, korrigieren, optimieren
Öffnen Sie das validate-SVG-Tool, Markup einfügen oder .svg-Datei laden. Fehler blockieren Auslieferung (ungültiges XML); Warnings laden ein, viewBox oder beschreibenden Text je nach Anwendungsfall hinzuzufügen.
Für ein informatives Icon z. B. <title>Fehler</title> direkt nach <svg>-Öffnung. Fehlt viewBox trotz width/height, ableiten (viewBox="0 0 24 24") oder resize-svg im Hub. Der SVG-Beautifier hilft, Struktur nach Edits zu lesen.
Nach validierter Struktur den SVGO-Optimierer (Safe- oder Default-Preset für UI-Icons). FastMinify erhält <title> und <desc> bei allen drei Presets — validate-svg danach erneut. Der schnelle SVG-Minifier berührt nur Whitespace und Kommentare.
Fazit
SVG-Barrierefreiheit beginnt mit einer klaren Entscheidung: dekorativ (aria-hidden, kein title) oder informativ (title/desc oder aria-label). validate-svg sichert Syntax und Struktur vor SVGO-Optimize — ohne ein vollständiges Audit zu ersetzen. Validierung, Optimierung und Re-Validierung im SVG-Hub verketten, um leichte Icons für alle auszuliefern.
Verwandte Artikel
Konvertieren Sie SVG-Icons in React/JSX-Komponenten, optimieren Sie mit SVGO und integrieren Sie sie sauber ins Design System.
Safe, default oder aggressive? Wählen Sie das richtige SVGO-Preset, optimieren Sie SVG für die Produktion und vermeiden Sie visuelle Regressionen.
Prüfen Sie die Struktur von `compose.yml` und `.env` vor `docker compose up` — lokal im Browser validieren, ohne CLI-Tools.