SVG-Barrierefreiheit: title, desc und Struktur validieren ohne Optimierung zu brechen

Ein Button „Löschen“ mit Papierkorb-SVG links vom Text: Das SVG erhält aria-hidden="true" und kein title. validate-svg zeigt eine Warnung zu title/desc, das ist zu erwarten. Die Barrierefreiheit liegt im Button-Text, nicht im Icon.

Ein Erfolgs- oder Fehler-Badge, das nur als SVG vorliegt, braucht <title>Erfolg</title> oder ein ausdrückliches aria-label an der Komponente. validate-svg bestätigt, dass Text vorhanden ist. Testen Sie danach mit Tastatur und Screenreader.

Binden Sie validate-svg in die Asset-Prüfung ein, besonders bei Icons von Designern ohne Tests mit assistiven Technologien.

Die Voreinstellungen default und aggressive führen cleanupIds aus, das IDs entfernen oder kürzen kann. Prüfen Sie daher, ob die von aria-labelledby genutzte ID erhalten bleibt (safe lässt IDs unangetastet). aggressive fasst zusätzlich Pfade zusammen, vergleichen Sie also immer visuell. svg-to-jsx behält das Markup, prüfen Sie aber, dass title/desc in der React-Komponente die ersten Kinder von <svg> 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.

Kein svgo-cli oder schwerer a11y-Linter nötig, um einen Figma-Export vor dem Merge zu prüfen.

Automatisierte Seitentests (Pa11y, axe-core in der CI, Lighthouse Accessibility) decken das gerenderte DOM ab, über die SVG-Quelldatei hinaus. Behalten Sie validate-svg vorgelagert bei den Assets und ergänzen Sie E2E-Tests mit Screenreadern für kritische Abläufe.

Verwenden Sie dieselbe SVGO-Voreinstellung in der Browser-Vorschau und in der CI. Prüfen Sie nach dem Schritt optimize der Pipeline eine Stichprobe von Hand mit validate-svg. Siehe SVGO-Presets und den SVG-Optimierungsleitfaden.

FastMinify validate-svg zielt auf SVG-Quell-Markup. Andere Tools decken gerenderte Seiten oder breitere Standards ab.

Ein Icon neben sichtbarem Text („Speichern“, „Schließen“) liefert keine Zusatzinformation, es ist rein visuell. Gute Praxis für Barrierefreiheit ist, es für Screenreader mit aria-hidden="true" auf <svg> oder mit role="presentation" auszublenden. Dann sind <title> und <desc> unnötig, sogar kontraproduktiv, wenn sie den angrenzenden Text wiederholen.

Ein alleinstehendes Piktogramm (Fehlerstatus ohne Text, Inline-Diagramm, Logo-Link ohne Alternativtext) muss Bedeutung vermitteln. Zwei Möglichkeiten: <title> und optional <desc> als erste Kinder von <svg>, oder role="img" + aria-label / aria-labelledby auf dem SVG oder seinem React-Wrapper.

Das Werkzeug liest das XML ein, verlangt ein <svg>-Wurzelelement, meldet ein fehlendes viewBox als Warnung und warnt, wenn weder <title> noch <desc> Text enthält. Das sind grundlegende Strukturprüfungen, keine Screenreader-Simulation, keine Kontrastprüfung und keine komplexe ARIA-Validierung. Für ein vollständiges Audit ergänzen Sie axe DevTools oder WAVE.

Öffnen Sie das validate-SVG-Tool, fügen Sie Markup ein oder laden Sie eine .svg-Datei. Fehler blockieren die Auslieferung (ungültiges XML), Warnungen laden dazu ein, je nach Anwendungsfall ein viewBox oder beschreibenden Text zu ergänzen.

Für ein informatives Icon fügen Sie zum Beispiel <title>Fehler</title> direkt nach dem öffnenden <svg> ein. Fehlt viewBox trotz width und height, leiten Sie eines ab (viewBox="0 0 24 24") oder nutzen resize-svg im Hub. Der SVG-Beautifier hilft, die Struktur nach Änderungen zu lesen.

Ist die Struktur validiert, nutzen Sie den SVGO-Optimierer (Voreinstellung safe oder default für UI-Icons). FastMinify erhält <title> und <desc> bei allen drei Voreinstellungen, prüfen Sie nach dem Optimieren daher erneut mit validate-svg. Der schnelle SVG-Minifier berührt nur Leerraum und Kommentare.