Prüfen Sie einen Ausschnitt, lesen Sie Rolle, Name und Tastaturverhalten und übernehmen Sie den passenden HTML-Patch einzeln.
01 / Semantik-Werkbank
Ausschnitt prüfen und Patches direkt übernehmen.
Die Demo startet von selbst und zeigt die wichtigsten Zustände. Sobald Sie eingreifen, gehört die Werkbank Ihnen.
Semantik-Werkbank
Vom Tag zum überprüfbaren Vertrag
0 übernommen
Patch-Warteschlange
2 konkrete Fixes
WCAG 2.1.1 · 4.1.2
Aktion hat keinen nativen Vertrag
Das div verspricht weder Fokus noch die übliche Aktivierung mit Enter und Leertaste.
Rolle
button
Name
In den Warenkorb
Tastatur
Tab · Enter · Leertaste
Beziehung
Aktion nativ im DOM
− vorher<div class="buy" onclick="addToCart()">
In den Warenkorb
</div>
+ Patch<button type="button" class="buy" onclick="addToCart()">In den Warenkorb</button>
Shop-Beispiel geladen. Zwei Patches sind bereit.
Die Werkbank erkennt ausgewählte Markup-Muster. Sie belegt keine WCAG-Konformität.
02 / Der Unterschied
Ein Ausschnitt ist gepatcht. Die Seite dahinter noch nicht.
Muster treten selten allein auf
Ein div mit onclick im Ausschnitt steht meist neben weiteren in Templates, Komponenten und im CMS. Der Patch zeigt das Prinzip an einer Stelle.
Der Check prüft den gerenderten DOM
Der Website-Check untersucht die veröffentlichte Seite mit CSS und Zuständen: Rollen, Namen, Labels und Überschriftenfolge im echten Dokument.
Fundstellen statt Stichprobe
Jeder Befund nennt Seite, Vorkommen und den konkreten nächsten Schritt – kostenlos und ohne Installation.
03 / Auf Ihrer Website
Jetzt die eigene Seite prüfen.
Die Werkbank prüft einen Ausschnitt. Der Website-Check prüft den gerenderten DOM Ihrer Seiten auf Semantik und weitere automatisch erkennbare Barrieren.