Zur Nutzungsanleitung springen
wcag-audit-patternsvon Seth Hobson

WCAG Audit Patterns Skill.

Ein Claude Code- und Codex-Skill für Design-Review: WCAG 2.2-Audits mit automatisierten Tests, manuellen Checks und Korrektur-Anleitung.

  • Design Review & Accessibility
  • Review-Bericht
wshobson/agents · plugins/accessibility-compliance/skills/wcag-audit-patterns/SKILL.mdSKILL.md
--- name: wcag-audit-patterns description: Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing accessible design patterns. --- ## When to Use This Skill ## Core Concepts ## Detailed patterns and worked examples ## Best Practices
Front Matter und Abschnittsüberschriften aus der Upstream-Datei vom 14.09.2026 · 2.439 Zeichen insgesamt

01 Was es tut

Was die Skill wcag-audit-patterns in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Dieser Skill führt WCAG-2.2-Accessibility-Audits durch, die automatisiertes Testen, manuelle Verifikation und Empfehlungen zur Behebung kombinieren. Er kategorisiert Verstöße nach Auswirkung (Kritisch/Blocker, Schwerwiegend, Moderat), deckt drei Konformitätsstufen ab (A für die gesetzliche Basis, AA für die meisten Vorschriften, AAA für spezialisierte Anforderungen) und wendet die POUR-Prinzipien (Perceivable, Operable, Understandable, Robust) an.

Der Skill behandelt häufige Verstöße wie fehlenden Alt-Text, Probleme beim Tastaturzugriff, unzureichenden Farbkontrast und falsche Überschriftenhierarchie. Er betont semantisches HTML, echte Nutzertests mit Menschen mit Behinderungen und den Aufbau barrierefreier Komponentenbibliotheken – dabei wird berücksichtigt, dass nur 30–50 % der Probleme durch Automatisierung erkennbar sind.

Was er erzeugt

  • Umsetzbare Behebungsstrategien für identifizierte Verstöße
  • Dokumentation barrierefreier Komponentenbibliotheken
Siehe Beispiel-Prompt ↗

So funktioniert es

  1. 01
    Verstöße nach Auswirkung kategorisieren

    Probleme werden klassifiziert als Kritisch (Blocker wie fehlender Alt-Text und kein Tastaturzugriff), Schwerwiegend (unzureichender Kontrast, fehlende Skip-Links) oder Moderat (fehlendes Sprachattribut, unklarer Linktext).

  2. 02
    POUR-Prinzipien anwenden

    Audit anhand von vier Prinzipien: Perceivable (können Nutzer den Inhalt wahrnehmen), Operable (können Nutzer die Oberfläche bedienen), Understandable (können Nutzer den Inhalt verstehen) und Robust (funktioniert es mit assistiven Technologien).

  3. 03
    Automatisiertes und manuelles Testen kombinieren

    Automatisierte Tools erkennen 30–50 % der Probleme, aber manuelles Testen ist für eine umfassende Abdeckung erforderlich.

  4. 04
    Detaillierte Musterdokumentation referenzieren

    Wenn die Kernkonzepte nicht ausreichen, verweist der Skill auf references/details.md für ausgearbeitete Beispiele und ausführliche Anleitungen zu Mustern.

02 Finden Sie Ihren Favoriten

Wann der wcag-audit-patterns Skill zu verwenden ist

Verwenden Sie den wcag-audit-patterns Skill in Claude Code oder Codex, wenn es um Design-Review dieser Art geht. Eignung und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

  • Durchführen von Accessibility-Audits von Webinhalten
  • Beheben von WCAG-Verstößen in bestehenden Oberflächen
  • Erfüllen gesetzlicher Anforderungen nach ADA oder Section 508
  • Vorbereitung auf Klagen wegen Barrierefreiheit
  • Erstellen von VPAT-Konformitätsdokumentation

    03 Innerhalb des Skills

    Regeln, die der Skill wcag-audit-patterns Claude Code und Codex vorgibt

    8 konkrete Anweisungen, Standardwerte und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

    1. Accessibility bereits in der Designphase beginnen

      Barrierefreiheit muss bereits früh in der Designphase berücksichtigt werden und darf nicht erst nachträglich hinzugefügt werden.

    2. Zuerst semantisches HTML verwenden

      Native HTML-Elemente sollten die Standardwahl sein, da sie den Bedarf an ARIA reduzieren und eine bessere Unterstützung für Barrierefreiheit bieten.

    3. Sich niemals allein auf automatisiertes Testen verlassen

      Manuelles Testen ist erforderlich, da automatisierte Tools nur 30–50 % der Accessibility-Probleme erkennen können.

    4. Natives HTML vor ARIA

      ARIA sollte nicht als erste Lösung eingesetzt werden; bevorzugen Sie wann immer möglich native HTML-Elemente.

    5. Fokus-Rahmen erhalten

      Fokus-Rahmen dürfen nicht ausgeblendet werden, da Tastaturnutzer bei der Navigation auf sie angewiesen sind.

    6. Zoom niemals deaktivieren

      Nutzer müssen Inhalte skalieren können, daher darf die Zoom-Funktion nicht deaktiviert werden.

    7. Mehrere Indikatoren neben Farbe

      Farbe allein darf nicht zur Vermittlung von Informationen genutzt werden; es sind mehrere Indikatoren erforderlich.

    8. Mit Nutzern mit Behinderungen testen

      Reale Nutzer mit Behinderungen liefern das beste Feedback und sollten in Tests einbezogen werden.

    04 In Betrieb nehmen

    wcag-audit-patterns in Claude Code oder Codex installieren

    Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

    wcag-audit-patterns zu Claude Code, Codex oder Ihrem Agent hinzufügen

    Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

    Terminal
    npx skills add https://github.com/wshobson/agents --skill wcag-audit-patterns

    Allgemeine skills-CLI-Form für plugins/accessibility-compliance/skills/wcag-audit-patterns/SKILL.md; das Repository kann einen eigenen Pfad dokumentieren.

    Dem Skill eine erste Design-Review-Aufgabe geben

    In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

    Starter prompt
    Audit [website URL or component name] against WCAG 2.2 AA standards. Identify all Critical and Serious violations including missing alt text, keyboard access issues, and color contrast failures. For each violation, provide the specific WCAG success criterion, the impact on users with disabilities, and concrete remediation code. Prioritize issues that would block screen reader users.

    Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

    Das erste Ergebnis prüfen

    Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

    • Kompatibilität mit assistiven Technologien für eine robuste Umsetzung prüfen

    In OpenDesign importieren Sie wcag-audit-patterns über dessen SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es dann in der oberen Leiste aus.

    05 Open Source, nachvollziehbar

    Quelle, Lizenz und Verifizierung

    Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

    Repository
    github.com/wshobson/agents Branch main
    Skill-Datei
    plugins/accessibility-compliance/skills/wcag-audit-patterns/SKILL.md Content-Prüfsumme bei Verifikation erfasst; Commit 4236bb9
    License
    MIT Aus LICENSE.
    Repository-Sterne
    39.635 GitHub-Snapshot vom 14.09.2026 für das gesamte wshobson/agents-Repository, das 18 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für wcag-audit-patterns.
    Verifiziert von OpenDesign
    14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

    In der SKILL.md

    1. Wann dieses Skill verwendet wirdListet sechs Szenarien auf, darunter Audits, Beheben von Verstößen und Erfüllung regulatorischer Anforderungen
    2. GrundkonzepteDefiniert drei Konformitätsstufen, die POUR-Prinzipien und häufige Verstöße nach Auswirkung
    3. WCAG-KonformitätsstufenStufe A ist die rechtliche Mindestanforderung, AA ist der Standard für Vorschriften, AAA für spezialisierte Anforderungen
    4. POUR-PrinzipienVier Prinzipien: Wahrnehmbar, Bedienbar, Verständlich, Robust – mit Leitfragen
    5. Häufige Verstöße nach AuswirkungKategorisiert Probleme als kritische Blocker, schwerwiegend oder moderat mit konkreten Beispielen
    6. Detaillierte Muster und durchgearbeitete BeispieleVerweist auf references/details.md für ausführliche Musterdokumentation
    7. Best PracticesListet fünf Do's und fünf Don'ts für barrierefreie Entwicklung auf
    Die eigene Beschreibung des Skills
    „Führen Sie WCAG 2.2 Barrierefreiheits-Audits mit automatisierter Prüfung, manueller Verifikation und Empfehlungen zur Behebung durch. Verwenden Sie den Skill beim Auditieren von Websites auf Barrierefreiheit, beim Beheben von WCAG-Verstößen oder bei der Implementierung barrierefreier Design-Patterns."

    Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 2.439 Zeichen. Lesen Sie die vollständige Datei auf GitHub.

    06 Vor der Installation

    Fragen zum Skill wcag-audit-patterns

    Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

    Welche WCAG-Konformitätsstufe sollte ich anstreben?

    Stufe AA ist die von den meisten Vorschriften geforderte Standard-Konformitätsstufe. Stufe A ist die rechtliche Mindestanforderung, während Stufe AAA nur für spezialisierte Anforderungen nötig ist. Die meisten ADA- und Section-508-Anforderungen werden mit AA-Konformität erfüllt.

    WCAG Audit Patterns

    wcag-audit-patterns an einer echten Design-Review-Aufgabe testen.

    Laden Sie OpenDesign herunter, importieren Sie wcag-audit-patterns über den SKILL.md-Link, fügen Sie die Eingabeaufforderung oben ein und lesen Sie den Plan vor dem Ergebnis.

    Terminal
    npx skills add https://github.com/wshobson/agents --skill wcag-audit-patterns

    OpenDesign Desktop

    Ein Designsystem. Jeder Output unverkennbar deine Marke

    Im vollständigen Vibe Design Workspace gelten dieselben Markenregeln für Websites, Slides, interaktive Prototypen, Dashboards, Bilder und HTML-Videos. Verbinde Codex, Claude Code, Cursor und weitere lokale Coding-Agents und gestalte kostenlos.

    • Web, Slides, Prototypen, Dashboards, Bilder und Video
    • 140+ Designsysteme plus die vollständige Vorlagen- und Skill-Bibliothek
    • Lokales Codex und 21+ Coding-Agents verbinden · Kostenlos

    Für macOS und Windows