A11y Audit

WCAG 2.2 AA/AAA-Audit mit gemessenen Kontrastverhältnissen und kriterienbasierten Korrekturen

von plugin87 · plugin87/ux-ui-agent-skills

Getestet · Funktioniert ★ 8.4/10

A11y Audit — WCAG 2.2 AA/AAA-Audit mit gemessenen Kontrastverhältnissen und kriterienbasierten Korrekturen

Was es kann

Prüft eine UI oder Komponente gegen WCAG 2.2 AA/AAA und WAI-ARIA-Muster und gibt eine Ergebnistabelle zurück, die spezifischen Erfolgskriterien mit P0/P1/P2-Schweregrad und konkreten Korrekturen zugeordnet ist. Wird ausgelöst, wenn der Benutzer eine Barrierefreiheitsprüfung, Kontrastverifizierung oder Tastatur-/Screenreader-Überprüfung anfordert. Es liest eine POUR-organisierte Checkliste und ARIA-Referenz und misst den Farbkontrast mit einem gebündelten Skript, anstatt Verhältnisse nur visuell zu beurteilen.

Testbericht

SKILL.md abgerufen und 6 referenzierte Pfade per Raw-Fetch stichprobenartig überprüft – alle HTTP 200; wcag-checklist.md und aria-patterns.md sind substanzielle reale Referenzen (POUR-organisierte Kriterientabelle, ARIA APG Tastaturbelegungen). scripts/contrast.py ausgeführt (reines python3, keine Abhängigkeiten): #767676/#fff = 4.54:1 PASS, #999/#fff = 2.85:1 FAIL, Exit-Codes korrekt. Für den Ausgabetest habe ich eine 6-Elemente card.html geschrieben und auf zwei Arten geprüft: eine Baseline-Sichtprüfung vs. den Skill-Körper, der das Ausführen von contrast.py pro Paar vorschreibt. Gemessene Verhältnisse änderten zwei Sichtprüfungsurteile – der blaue Link #5b8def sieht gut aus, misst aber 3.23:1 (FAIL 1.4.3) und das rote Badge #d32f2f sieht schwach aus, misst aber 4.98:1 (PASS); #8a8a8a Überschrift = 3.45:1 und #a0a0a0 Text = 2.61:1 beide FAIL. Keine Sicherheitsmängel (kein curl|sh, base64, eval). Reibung: Das Skill-Verzeichnis bündelt nur SKILL.md und hängt von Geschwisterdateien/-skripten im Repo-Root ab, sodass eine eigenständige Kopie des Skill-Verzeichnisses seine Schritte unterbricht – vollständige Paketinstallation erforderlich.

Getestet am: 2026-07-21 · Claude Code 2.x (agent harness)

Installation

git clone --depth 1 https://github.com/plugin87/ux-ui-agent-skills.git /tmp/a11y-audit-src
mkdir -p ~/.claude/skills
cp -R /tmp/a11y-audit-src/.claude/skills/a11y-audit ~/.claude/skills/a11y-audit
# IMPORTANT: the skill dir holds only SKILL.md. Its steps read repo-root sibling files
#   accessibility/wcag-checklist.md, accessibility/aria-patterns.md, taste/motion-choreography.md
#   and run scripts/contrast.py, scripts/measure_render.mjs, scripts/verify_states.mjs
# — all relative to the repo root, NOT bundled with the skill. For full function, install the
# whole package into your project: npx ux-ui-agent-skills  (installs accessibility/ + scripts/ too).
# scripts/contrast.py = pure python3, no deps. measure_render.mjs/verify_states.mjs need:
#   npm i -D playwright   (without it they SKIP with exit 0, they do not error).

Befehle & Beispiel-Prompts

/a11y-auditWCAG 2.2 AA/AAA-Audit mit gemessenen Kontrastverhältnissen und kriterienbasierten Korrekturen

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

Audit this page for WCAG 2.2 AA compliance
Check the contrast ratios on this design
Review this component for screen-reader support

Vollständiger Testbericht (Englisch) →