peterruiter/claude-build-framework

Vollständiger Barrierefreiheits-Check gemäß WCAG 2.2 AA - axe-core via Playwright über alle Hauptseiten in hell und dunkel bei 1440/390 (und 320 für Reflow), Tests für Skip-Link, eine h1, Sprache, sichtbare und nicht verdeckte Fokus, 24px-Ziele und horizontales Scrollen, ein Tastaturskript für Dialoge/Drawer/Tabs, manuelle Prüfungen (Textabstand, Zoom, Alternativen für Ziehen, barrierefreie Authentifizierung), Kontrakttests für gemeinsame Komponenten und Themenkontrast, Korrekturen, bekannte Einschränkungen mit Begründung und eine Erklärung zur Barrierefreiheit. Verwenden, wenn der Nutzer nach einem „Accessibility Pass“, „WCAG“, „a11y-Audit“, „Screenreader“ oder vor der ersten öffentlichen Veröffentlichung fragt.

Was ist claude-build-framework?

Dieses KI-Agenten-Skill führt einen vollständigen Barrierefreiheits-Check gemäß WCAG 2.2 AA auf Webanwendungen durch. Es automatisiert die Prüfung mit axe-core über Playwright auf allen Hauptseiten in hellen und dunklen Modi bei verschiedenen Bildschirmbreiten (1440, 390 und 320 Pixel für Reflow-Tests). Das Skill prüft Skip-Links, eine einzelne h1, Sprachattribute, sichtbaren und nicht verdeckten Fokus, 24px-Ziele, horizontales Scrollen und führt ein Tastaturskript für Dialoge, Drawer und Tabs aus. Es enthält auch manuelle Prüfungen wie Textabstand, 200% Zoom, Alternativen für Ziehaktionen, redundante Eingabe und barrierefreie Authentifizierung. Nach den Tests werden die Ergebnisse in einer vorher/nachher-Tabelle mit Schweregraden festgehalten und Korrekturen an gemeinsamen Komponenten (Fokusringe, Dialog-Key-Helper, klickbare Zeilen, Scrollregionen) vorgenommen. Abschließend werden Kontrakttests für gemeinsame Komponenten erstellt, bekannte Einschränkungen mit Gründen dokumentiert und ein Bericht mit Violation-Counts, Screenshots und einem What’s-New-Eintrag erstellt. Das Skill produziert auch eine Seite mit der Erklärung zur Barrierefreiheit (Accessibility Statement) in jeder konfigurierten Sprache, die aus jedem Footer verlinkt ist.

Funktioniert mit✓Claude Code~Codex CLI~Cursor

npx skills add https://github.com/peterruiter/claude-build-framework/tree/HEAD/skills/a11y-pass

Dokumentation

Accessibility Pass (Barrierefreiheits-Check)

Referenz: ${CLAUDE_PLUGIN_ROOT}/docs/accessibility.md und ${CLAUDE_PLUGIN_ROOT}/docs/design-systems.md. WCAG 2.2 AA ist Teil der Definition of Done jedes Features; dieser Pass ist der vollständige darüberliegende Durchlauf.

1. Einrichtung

Pinne und installiere die Tools außerhalb des Produkts: npm i --prefix <ordner> playwright@<pinned> axe-core@<pinned>; A11Y_TOOLS=<ordner>.
Starte die App lokal mit Demodaten auf einer leeren Datenbank und deinem eigenen Port.
Erstelle tests/a11y/pages.json mit jeder Hauptseite (und Dialogen via open), mit lang pro Seite und einem signIn-Modul für eingeloggte Seiten.
Führe den Pass aus, wenn wenige andere Agenten laufen; führe kleine, gezielte Änderungen in gemeinsamen Komponenten durch.

2. Messen („vorher“)

node tests/a11y/axe-pages.mjs --probes --json scratch/a11y-vorher.json
node tests/a11y/axe-pages.mjs --probes --widths 320 --page <breite Seiten>
node --test "tests/contracts/*.test.mjs"     # Themenkontrast in hell und dunkel

Zusätzlich das Tastaturskript für die Muster der App (Skip-Link → Hauptinhalt, Dialog-Trap und Fokus-Rückkehr, oberste Escape-Taste, Pfeiltasten in Tab-Listen, Enter auf klickbaren Zeilen) und die manuellen Prüfungen: Textabstand (1.4.12), 200 % Zoom, Alternativen für Ziehen (2.5.7), redundante Eingabe (3.3.7), barrierefreie Authentifizierung (3.3.8), Diagramme mit Tabellen, E-Mails (Sprache, Präsentationstabellen, Alt-Texte, dunkles Design).

3. Ergebnisse und Korrekturen

Tabelle: # | Kriterium | Wo | Schweregrad (schwer/mittel/gering) | Korrigiert?. Korrigiere in der gemeinsamen Komponente (ein Fokusring-Token, ein Dialog-Keys-Helper, klickbare Zeilen, zusammengesetzte Tasten, Scrollregionen, Live-Regionen, scroll-padding). Übersetze jeden neuen barrierefreien Namen in jede konfigurierte Sprache. Füge Kontrastpaare für neue Farbkombinationen hinzu.

4. Schutzmaßnahmen

Kontrakttests für gemeinsame Komponenten (Namen, Live-Regionen vor Nachrichten, Token-Paare, reduziert Bewegung, Skip-Links).
Verbleibende Ergebnisse in tests/a11y/known.json mit Gründen, identisch zu den bekannten Einschränkungen auf der Erklärung zur Barrierefreiheit-Seite (Ziel WCAG 2.2 AA, Einschränkungen, Kontakt; in jeder konfigurierten Sprache; aus jedem Footer verlinkt).

5. Bericht

Vorher → nachher Violation-Anzahl pro Oberfläche, Anzahl pro Schweregrad (korrigiert / nicht korrigiert), Screenshots, was nicht gemacht wurde (Screenreader, native Shells, externes Audit). Ein What's New-Eintrag. Abschnitt in STATE.md.