SkillProof tested Claude skills

Accessibility Compliance

WCAG 2.2 AA Überprüfung von Webseiten: Alt-Text, Kontrastberechnung, Diagramm- und Formularmuster

von jamditis · jamditis/claude-skills-journalism

Getestet · Funktioniert ★ 8.8/10

Accessibility Compliance — WCAG 2.2 AA Überprüfung von Webseiten: Alt-Text, Kontrastberechnung, Diagramm- und Formularmuster

Was es kann

Wandelt eine Barrierefreiheitsanfrage in einen WCAG 2.2 AA-Durchlauf über Markup um: eine POUR-Checkliste, ein WHO/WHAT/WHERE-Alt-Text-Entscheidungsbaum, ein barrierefreies Diagrammmuster mit einer verknüpften Datentabelle, Formularfelder mit aria-describedby und role="alert", prefers-reduced-motion-Behandlung und eine ausführbare Kontrastverhältnis-Funktion. Wird ausgelöst, wenn Sie eine Website oder Vorlage auf WCAG-Konformität prüfen, Alt-Text für Bilder schreiben, eine Datenvisualisierung oder ein Formular für Screenreader nutzbar machen oder den Farbkontrast überprüfen möchten. Enthält Checklisten für Bildunterschriften und Audiobeschreibungen, Paul Tol farbenblindensichere Paletten, ein angeheftetes axe-core plus Playwright-Audit-Rezept und aktuelle US-amerikanische und EU-rechtliche Fristen.

Testbericht

In ein temporäres HOME geklont (export HOME=$(mktemp -d)) und das Skill-Verzeichnis kopiert; SKILL.md landete unter ~/.claude/skills/accessibility-compliance/SKILL.md, Frontmatter hat name+description, und der Body referenziert keine Repo-Dateien (die drei "Related skills" existieren alle im Baum; SKILL.md, dev-toolkit/README.md und plugin.json gaben alle HTTP 200 zurück). Aufgabe: Überprüfung eines 30-zeiligen HTML-Fragments eines Nachrichtenartikels (schlechter Alt-Text, Diagramm als PNG, unbeschriftetes E-Mail-Feld, div als Schaltfläche mit 20x20px, Autoplay-Video, a:focus{outline:none}, drei kontrastarme Farben) und Erstellung einer korrigierten Version. Baseline (2.6KB, /private/tmp/claude-501/-Users-afin-Desktop-Skill-Agregator/94648f54-e301-46fc-afd8-b98858a51ecf/scratchpad/a11y_baseline.md) erhielt Semantik, Labels und eine echte Schaltfläche, schrieb aber "contrast looks too light, should be checked" und "only 20x20px, hard to hit"; der Skill-Lauf (8.8KB, a11y_skill.md) zitierte WCAG 2.2 SC 2.5.8 mit dem 24x24 CSS-px Schwellenwert, und ich führte tatsächlich die validate_contrast() des Skills aus, um 2.79:1 / 3.14:1 / 3.12:1 FEHLGESCHLAGEN und 6.29:1 / 6.54:1 BESTANDEN für die Ersetzungen zu erhalten. Die Skill-Version fügte auch die <details>-Datentabelle plus aria-labelledby/describedby für das Diagramm hinzu (Baseline schrieb nur einen einzeiligen Alt-Text), einen prefers-reduced-motion-Block und JS-Gate, die die Baseline vollständig übersehen hatte, caption/description <track>-Elemente und :focus-visible anstelle des stumpfen :focus der Baseline. Sicherheitsscan sauber: keine curl|sh, keine base64, keine Secrets, npm-Abhängigkeit auf eine exakte Version festgelegt, die ich als existierend und aktuellste im npm-Registry bestätigt habe, und die Datei weist explizit an, axe aus den lokalen node_modules statt von einem CDN zu laden. Docs einen Punkt Abzug: Beschreibung ist journalistisch formuliert und nennt sich "essential", und data-journalism in "Related skills" wird in einem anderen Plugin als diesem geliefert.

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

Installation

git clone --depth 1 https://github.com/jamditis/claude-skills-journalism.git /tmp/accessibility-compliance-src
mkdir -p ~/.claude/skills
cp -R /tmp/accessibility-compliance-src/dev-toolkit/skills/accessibility-compliance ~/.claude/skills/accessibility-compliance
# Single self-contained SKILL.md (20KB), no bundled scripts or reference files.
# No dependencies needed for the review/markup guidance itself.
# Optional, only for the automated-audit section of the skill:
#   npm install --save-dev --save-exact axe-core@4.12.1 && npm ci
#   pip install playwright && playwright install chromium
# Plugin-marketplace alternative: the repo ships .claude-plugin/marketplace.json and the
# skill lives in the "dev-toolkit" plugin, which also bundles 9 other dev skills.

Befehle & Beispiel-Prompts

  • /accessibility-complianceWCAG 2.2 AA Überprüfung von Webseiten: Alt-Text, Kontrastberechnung, Diagramm- und Formularmuster

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

  • Audit this news site for WCAG compliance
  • Write alt text for these news images
  • Build an accessible data visualization for readers

Vollständiger Testbericht (Englisch) →