Accessible SVG
Accessible SVG beginnt mit dem Zweck.
Dekoration bleibt stumm, Information erhält einen Namen, Funktion gehört in ein benanntes Steuerelement. Prüfen Sie Code oder Einbindung, ohne die Eingabe auszuführen.
01 / Live-Labor
Zweck wählen, Prüfung und Markup sofort sehen.
Die Demo startet von selbst und zeigt die wichtigsten Zustände. Sobald Sie eingreifen, gehört das Labor Ihnen.
SVG-Zwecklabor
Aussage trennen. Accessibility Tree ordnen.
PrüfurteilMuster passt
Accessibility Tree
img · Umsatz nach Quartaltitle + desc<svg role="img" aria-labelledby="svg-title svg-desc" viewBox="0 0 64 48">
<title id="svg-title">Umsatz nach Quartal</title>
<desc id="svg-desc">Vier Balken zeigen einen Anstieg von 18 auf 31 Prozent.</desc>
<!-- Grafik-Pfade -->
</svg>Informative SVG gewählt. Name und Beschreibung werden geprüft.
02 / Der Unterschied
Ein Muster ist der Anfang, nicht die Website.
Der Zweck steht selten im Code
Icons bekommen Alt-Texte, Diagramme bleiben stumm, dekorative Pfade erzeugen Tastaturstopps. Ohne Zweck-Entscheidung entsteht pro Grafik eine Barriere.
Mehr als ein geprüftes Muster
Der Website-Check durchsucht Ihre Seiten nach Grafiken ohne zugänglichen Namen, fehlendem aria-hidden und unnötigen Fokusstopps.
Fundstellen statt Bauchgefühl
Jeder Befund nennt Seite, Vorkommen und den konkreten nächsten Schritt – kostenlos und ohne Installation.
03 / Auf Ihrer Website
Jetzt die eigenen Grafiken prüfen.
Das Labor prüft ein SVG-Muster. Der Website-Check prüft jede Grafik auf Ihren Seiten auf Namen, Rolle und weitere automatisch erkennbare Barrieren.
Der Website-Check ist bereit.
- 1URL
- 2Auswahl
- 3Prüfung
- 4Ergebnis