Zur Nutzungsanleitung springen
accessibility-reviewvon Anthropic

Accessibility Review Skill.

Ein Skill für Claude Code und Codex zur Design-Prüfung: WCAG 2.1 AA-Audit einer Seite oder eines Designs – Kontrast, Tastatur, Touch-Ziele.

  • Design Review & Accessibility
  • Review-Bericht
anthropics/knowledge-work-plugins · design/skills/accessibility-review/SKILL.mdSKILL.md
--- name: accessibility-review description: Run a WCAG 2.1 AA accessibility audit on a design or page. Trigger with "audit accessibility", "check a11y", "is this accessible?", or when reviewing a design for color contrast, keyboard navigation, touch target size, or screen reader behavior before handoff. --- ## Usage ## Testing Approach ## Output ## Accessibility Audit: [Design/Page Name] ## If Connectors Available ## Tips
Kopfdaten und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 4.248 Zeichen insgesamt

01 Was es tut

Was der Skill accessibility-review in Claude Code und Codex macht

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

Eine Audit-Routine nach WCAG 2.1 AA für ein Design oder eine Seite, ausgelöst durch Formulierungen wie "audit accessibility" oder "check a11y", die eine Figma-URL, eine URL oder eine Beschreibung als Argument entgegennimmt.

Er enthält eine kompakte Kurzreferenz mit elf Kriterien über Wahrnehmbar, Bedienbar, Verständlich und Robust hinweg: 4,5:1 Kontrast für normalen Text, 3:1 für großen Text und UI-Komponenten, Tastaturzugriff, sichtbarer Fokus und Touch-Ziele von 44x44 CSS-Pixeln, dazu acht häufige Probleme und ein fünfstufiges Testvorgehen, das mit einem automatisierten Scan beginnt, der rund 30 % der Probleme findet. Die Ergebnisse landen in einem festen Markdown-Bericht mit Schweregrad-Zählungen, Tabellen je Prinzip, Abschnitten zu Kontrast, Tastatur und Screenreadern sowie priorisierten Korrekturen.

Was er erzeugt

  • Ein Markdown-Bericht zum Accessibility-Audit, überschrieben mit dem Design- oder Seitennamen und dem Standard WCAG 2.1 AA.
  • Ein Abschnitt mit Ergebnissen, aufgeteilt in Tabellen für Wahrnehmbar, Bedienbar, Verständlich und Robust mit Problem, Kriterium, Schweregrad und Empfehlung.
  • Eigene Tabellen für Farbkontrast, Tastaturnavigation und Screenreader, inklusive des angesagten Namens je Element.
  • Eine geordnete Prioritätsliste, die kritische Korrekturen, die Nutzer blockieren, von wichtigen Verbesserungen und kleinen Nice-to-haves trennt.
Siehe Beispiel-Prompt ↗

So funktioniert es

  1. 01
    Übergeben Sie das zu prüfende Objekt

    Der Befehl nimmt eine Figma-URL, eine Seiten-URL oder eine schriftliche Beschreibung als Argument und prüft dieses Ziel.

  2. 02
    Die elf AA-Kriterien prüfen

    Die Kurzreferenz gruppiert die Kriterien unter Wahrnehmbar, Bedienbar, Verständlich und Robust, jeweils mit Nummer des Erfolgskriteriums und Schwellenwert.

  3. 03
    Die fünf Testdurchgänge ausführen

    Automatisierter Scan, reine Tastaturnavigation, Screenreader-Tests, Kontrastprüfung und 200 % Zoom, in dieser Reihenfolge.

  4. 04
    Die feste Berichtsstruktur schreiben

    Ein Markdown-Bericht mit einer Schweregrad-Übersicht, einer Ergebnistabelle je Prinzip und getrennten Tabellen für Kontrast, Tastatur und Screenreader.

  5. 05
    Konnektoren nutzen, wenn vorhanden

    Ist ein Design-Tool verbunden, liest er Farbwerte, Schriftgrößen und Touch-Ziele aus Figma; ist ein Projekt-Tracker verbunden, legt er pro Befund Tickets an.

02 Finden Sie Ihren Favoriten

Wann das accessibility-review Skill verwendet wird

Verwenden Sie die accessibility-review Skill in Claude Code oder Codex, wenn die Aufgabe eine Design-Überprüfung dieser Art ist. Eignung und Grenzen unten stammen aus der eigenen Datei der Skill.

Gut geeignet

  • Prüfung eines Designs auf Farbkontrast, Tastaturnavigation, Touch-Ziel-Größe oder Screenreader-Verhalten vor der Übergabe.
  • Eine fertige Seite auditieren, sofern Sie eine URL angeben können.
  • Farbwerte, Schriftgrößen und Touch-Targets direkt aus einer Figma-Datei auslesen, wenn ein Design-Tool verbunden ist.
  • Das Audit in nachverfolgbare Arbeit verwandeln, indem Sie pro Befund ein Ticket anlegen und es mit bestehenden Remediation-Epics verknüpfen.

Grenzen kennen

  • Das Audit als vollständige Abdeckung betrachten: Der automatisierte Scan übersieht die meisten Probleme, und Tests mit echter assistiver Technologie bleiben weiterhin nötig.

Was Sie bereitstellen sollten

  • Die Design- oder Seitenreferenz selbstSie wird als erstes Argument in die Audit-Anweisung eingesetzt.

03 Innerhalb des Skills

Regeln, die der Skill accessibility-review an Claude Code und Codex übergibt

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

  1. UI-Komponenten auf 3:1 verpflichten

    Für UI-Komponenten und Grafiken verlangt Kriterium 1.4.11 einen Nicht-Text-Kontrast von mindestens 3:1.

  2. Touch-Targets von 44x44 durchsetzen

    Touch-Targets müssen laut Kriterium 2.5.5 mindestens 44x44 CSS-Pixel groß sein.

  3. Alles per Tastatur erreichbar machen

    Die gesamte Funktionalität muss per Tastatur verfügbar sein (2.1.1), mit sichtbarem Fokusindikator (2.4.7).

  4. Zoom auf 200 % als Bestanden oder Nicht bestanden

    Das Layout wird bei 200 % Zoom getestet und markiert, wenn es bricht.

  5. Jeden Befund an ein Kriterium binden

    Jede Zeile in den Befundtabellen nennt das WCAG-Kriterium zusammen mit Problem, Schweregrad und Empfehlung.

  6. Schweregrad als Critical, Major oder Minor vergeben

    Befunde werden mit einem von drei Schweregraden gekennzeichnet, die als farbige Markierungen in der Empfehlungsspalte erscheinen.

  7. Mit Kontrast und Tastatur beginnen

    Der Skill beginnt standardmäßig mit Kontrast und Tastatur, weil sich damit die häufigsten und folgenreichsten Probleme finden lassen.

04 In Betrieb nehmen

accessibility-review 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.

accessibility-review 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/anthropics/knowledge-work-plugins --skill accessibility-review

Generische skills-CLI-Form für design/skills/accessibility-review/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 accessibility for [Figma URL for the checkout flow] before we hand it to engineering. Start with contrast and keyboard access, and flag anything that would block a screen reader user as critical.

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:

  • Die gesamte Seite ausschließlich mit der Tastatur bedienen.
  • Mit VoiceOver oder NVDA testen, statt sich auf das Audit zu verlassen.
  • Die tatsächlichen Kontrastverhältnisse gegen die geforderten Werte prüfen.
  • Arbeiten Sie die vorrangigen Korrekturen der Reihe nach ab – blockierende Probleme vor Feinschliff.

In OpenDesign importieren Sie accessibility-review über seinen SKILL.md-Link: Plugins → Add → Skill → Import from link, dann wählen Sie es 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.

Author
Anthropic
Skill-Datei
design/skills/accessibility-review/SKILL.md Inhalts-Prüfsumme bei Verifizierung aufgezeichnet; Commit 8f877b6
License
Apache-2.0 Aus LICENSE.
Repository-Sterne
24.012 GitHub-Snapshot vom 2026-09-14 für das gesamte Repository anthropics/knowledge-work-plugins, das 7 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für accessibility-review.
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. NutzungZeigt die Befehlsform und wie das Argument in das Audit eingesetzt wird.
  2. WCAG 2.1 AA – KurzreferenzElf Kriterien, aufgeführt unter Wahrnehmbar, Bedienbar, Verständlich und Robust, mit Schwellenwerten.
  3. Häufige ProblemeAcht wiederkehrende Fehler – von Kontrast und Formularbeschriftungen bis zu Fokusfallen und Zeitlimits.
  4. TestansatzFünf Durchgänge: automatischer Scan, Tastatur, Screenreader, Kontrast, Zoom auf 200 %.
  5. AusgabeDie Berichtsvorlage mit Schweregrad-Übersicht, Prinzipientabellen, Kontrastzeilen und vorrangigen Korrekturen.
  6. Wenn Konnektoren verfügbar sindWas sich ändert, wenn ein Design-Tool oder Projekt-Tracker verbunden ist.
  7. TippsMit Kontrast und Tastatur beginnen, mit echter assistiver Technologie testen, nach Wirkung priorisieren.
Die eigene Beschreibung des Skills
„Führen Sie ein WCAG 2.1 AA Barrierefreiheits-Audit für ein Design oder eine Seite durch. Wird ausgelöst mit „audit accessibility", „check a11y", „is this accessible?" oder bei der Überprüfung eines Designs auf Farbkontrast, Tastaturnavigation, Touch-Target-Größe oder Screenreader-Verhalten vor der Übergabe."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 4.248 Zeichen. Vollständige Datei auf GitHub lesen.

Barrierefreiheits-Review

accessibility-review an einer echten Design-Review-Aufgabe ausführen.

OpenDesign herunterladen, accessibility-review vom SKILL.md-Link importieren, obigen Prompt einfügen und den Plan vor dem Ergebnis lesen.

Terminal
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill accessibility-review

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