Eine Symbolschaltfläche ohne Namen, ein Formularfeld nur mit Platzhalter oder ein entfernter Fokusrahmen schließt Menschen, die Screenreader oder die Tastatur nutzen, von deiner Website aus. Bei genau diesen Fehlern setzen Barrierefreiheitsprüfungen und Beschwerden an. Dieser Skill findet diese und elf weitere häufige WCAG-Verstöße in deinem HTML und CSS und erklärt, wie du jeden davon behebst.

Dein Agent führt einen Scanner für deine .html-Seiten und .css-Dateien aus. Er analysiert das HTML (Kommentare werden übersprungen, Zeilennummern exakt erfasst), ermittelt den zugänglichen Namen jeder Schaltfläche und jedes Links aus Text, verborgenem Text, aria-label und Bild-Alternativtext sowie die Beschriftung jedes Feldes aus <label for>, einem umschließenden label oder ARIA-Attributen. Vorlagencode ({{ }}, {% %}) zählt als vorhandener Inhalt. Er öffnet niemals einen Browser. Das Ergebnis ist BLOCK, REVIEW oder NOT FLAGGED mit Datei, Zeile, Begründung und einer sichereren Vorgehensweise.

Was geprüft wird

BLOCKIEREND (vor der Auslieferung beheben)

• A01: Bilder ohne Alternativtext

• A02: Formularfelder ohne Beschriftung (nur mit Platzhalter)

• A03: Schaltflächen und Links ohne zugänglichen Namen

• A04: keine Seitensprache in <html>

• A05: Klick-Handler auf divs und spans, die per Tastatur nicht erreichbar sind

PRÜFEN (vor der Veröffentlichung kontrollieren)

• A11: positiver tabindex

• A12: deaktivierter Zwei-Finger-Zoom

• A13: übersprungene Überschriftenebenen

• A14: iframes ohne title

• A15: automatisch abgespielte Videos oder Audiodateien mit Ton

• A16: doppelte IDs

• A17: aria-hidden auf fokussierbaren Elementen

• A18: Datentabellen ohne Kopfzellen

• A19: in CSS entfernte Fokusrahmen

Lieferumfang

• Der Scanner (Python 3.9+, nur Standardbibliothek)

• Ein Regelhandbuch mit Begründung, WCAG-Kriterium und einer sichereren Vorgehensweise für jede Regel

• Eine beispielhafte Seite mit CSS und Risiken sowie eine sichere Variante und der tatsächliche Scannerbericht zum Beispiel mit Risiken

Grenzen

Der Scanner liest jede Datei in ihrer vorliegenden Form, nicht die vom Browser erzeugte Seite: Durch JavaScript-Frameworks hinzugefügte Inhalte, Farbkontraste, Untertitel und das Verhalten von Screenreadern müssen weiterhin manuell geprüft werden. Automatische Prüfungen finden nur einen Teil aller Barrierefreiheitsprobleme. NOT FLAGGED ist keine Garantie.

Inhalt

Eine ZIP-Datei mit 9 Dateien: SKILL.md, der Scanner unter scripts/ (2 Python-Dateien), references/rules.md (jede Regel mit Begründung und einer sichereren Vorgehensweise) und examples/ (4 Beispieldateien plus report.md, die tatsächliche Scannerausgabe zum Beispiel mit Risiken).

So funktioniert es: Dies ist ein Agenten-Skill: ein Ordner mit einer SKILL.md-Datei und Python-Skripten, die ein KI-Programmieragent wie Claude Code, Cursor oder Codex CLI ausführen kann. Entpacke ihn in den Skills-Ordner deines Agenten (für Claude Code: ~/.claude/skills/) und bitte deinen Agenten anschließend, dein Projekt zu prüfen. Die Skripte lassen sich auch eigenständig mit Python 3.9 oder neuer ausführen, ohne zusätzliche Installationen. Sie lesen ausschließlich deine Dateien: kein Netzwerkzugriff, und es wird nichts irgendwohin gesendet.