accessibility-compliancevon Seth Hobson

Accessibility Compliance Skill.

Ein Skill für Claude Code und Codex für Design-Review: WCAG-2.2-konforme Oberflächen mit mobiler Barrierefreiheit und Unterstützung für assistive Technologien.

Design Review & Accessibility
UI-Code

OpenDesign herunterladen Anleitung ansehen

wshobson/agents · plugins/ui-design/skills/accessibility-compliance/SKILL.mdSKILL.md

--- name: accessibility-compliance description: Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences. --- ## When to Use This Skill ## Detailed patterns and worked examples ## Best Practices ## Testing Tools

Frontmatter und Abschnittsüberschriften aus der Upstream-Datei vom 14.09.2026 · 2.402 Zeichen insgesamt

01 Was es tut

Was das Skill accessibility-compliance in Claude Code und Codex bewirkt

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

Dieses Skill implementiert WCAG-2.2-konforme Oberflächen mit mobiler Barrierefreiheit und Unterstützung für assistive Technologien. Es führt Agenten durch semantisches HTML, ARIA-Muster, Tastaturnavigation, Fokusmanagement, Screenreader-Kompatibilität und Ankündigungen dynamischer Inhalte. Das Skill deckt iOS VoiceOver, Android TalkBack und Desktop-Screenreader (NVDA, JAWS) ab.

Es setzt auf native Elemente statt auf benutzerdefiniertes ARIA, respektiert Nutzereinstellungen wie prefers-reduced-motion und prefers-contrast und testet mit automatisierten Werkzeugen (axe DevTools, WAVE, Lighthouse) sowie mit echten assistiven Technologien. Der Skill behandelt häufige Verstöße wie fehlende Alt-Texte, schlechten Kontrast, Tastaturfallen und nicht beschriftete Formulareingaben.

Was er erzeugt

WCAG-2.2-konforme Interfaces mit korrekten ARIA-Mustern, Fokusmanagement und Screenreader-Unterstützung

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Tastaturzentrierte Interaktionen entwerfen
Stellen Sie sicher, dass alle interaktiven Komponenten ohne Maus funktionieren, und etablieren Sie die Tastaturnavigation, bevor Sie Pointer-Events hinzufügen.

02 Finden Sie Ihren Favoriten

Wann Sie den accessibility-compliance Skill verwenden

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

Gut geeignet

Implementierung von WCAG 2.2 Level AA oder AAA für eine Webanwendung oder Website
Screenreader-kompatible Interfaces erstellen, die mit VoiceOver, NVDA, JAWS oder TalkBack funktionieren
Tastaturnavigation und Fokusmanagement zu interaktiven Komponenten hinzufügen
Barrierefreiheits-Audits durchführen und Verstöße in bestehenden Interfaces beheben
Reduzierte Bewegung und hohen Kontrast als Nutzereinstellungen im Interface unterstützen

03 Innerhalb des Skills

Was das accessibility-compliance Skill zur Design-Prüfung beiträgt

2 Dinge, die die SKILL.md Claude Code oder Codex anweist zu tun, in der Reihenfolge der Abschnitte der Datei.

Best Practices
Bevorzugen Sie native Elemente gegenüber ARIA, wenn möglich; Beziehen Sie Menschen mit Behinderungen in Benutzertests ein; Gestalten Sie Interaktionen so, dass sie ohne Maus funktionieren
Test-Tools
axe DevTools, WAVE, Lighthouse; VoiceOver (macOS/iOS), NVDA/JAWS (Windows), TalkBack (Android); NoCoffee (Sehvermögen), Silktide (verschiedene Behinderungen)

04 In Betrieb nehmen

Installieren Sie accessibility-compliance in Claude Code oder Codex

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

accessibility-compliance 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 accessibility-compliance

Generische skills-CLI-Form für plugins/ui-design/skills/accessibility-compliance/SKILL.md; das Repository dokumentiert möglicherweise seinen eigenen Pfad.

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 the [product dashboard] for WCAG 2.2 Level AA compliance. Check for missing alt text, color contrast violations, keyboard traps, and unlabeled form inputs. Implement focus management for the [modal dialog component] and add ARIA live regions to announce [real-time notification updates]. Test with VoiceOver and ensure the interface respects prefers-reduced-motion.

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:

Testen Sie manuell mit VoiceOver unter macOS oder iOS, um Screenreader-Ansagen und Navigation zu prüfen
Verwenden Sie Sehsimulatoren wie NoCoffee und Behinderungssimulatoren wie Silktide, um verschiedene Einschränkungen zu testen

In OpenDesign importieren Sie accessibility-compliance über seinen SKILL.md-Link: Plugins → Add → Skill → Import from link, dann wählen Sie es in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

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

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
Skill-Datei: plugins/ui-design/skills/accessibility-compliance/SKILL.md Inhaltsprüfsumme bei Verifikation erfasst; Commit 4236bb9
License: MIT Aus LICENSE.
Repository-Sterne: 39.635 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository wshobson/agents, das 18 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für accessibility-compliance.
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

Wann Sie diesen Skill einsetzenWCAG-Konformität, Screenreader, Tastaturnavigation, Fokusmanagement, Formulare, mobile Barrierefreiheit, Audits
Detaillierte Muster und ausgearbeitete BeispieleVerweist auf references/details.md für die Musterdokumentation, wenn die übergeordnete Anleitung nicht ausreicht
Best PracticesAcht Kernregeln: semantisches HTML, Tests mit echten Nutzern, Tastatur zuerst, Fokus-Stile, Textalternativen, Zoom, Live-Regionen, Präferenzen
Häufige ProblemeFehlende Alt-Texte, schlechter Kontrast, Tastaturfallen, unbeschriftete Eingaben, Autoplay, schlechte eigene Steuerelemente, Skip-Links, Fokusreihenfolge
TestwerkzeugeAutomatisierte Tools (axe, WAVE, Lighthouse), manuelle Screenreader (VoiceOver, NVDA, JAWS, TalkBack), Simulatoren (NoCoffee, Silktide)

Die eigene Beschreibung des Skills

„Implementieren Sie WCAG 2.2-konforme Oberflächen mit mobiler Barrierefreiheit, inklusiven Designmustern und Unterstützung für assistive Technologien. Verwenden Sie diese Skill bei der Prüfung von Barrierefreiheit, der Implementierung von ARIA-Mustern, der Entwicklung für Screenreader oder der Sicherstellung inklusiver Benutzererfahrungen."

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

Barrierefreiheit-Konformität

Führen Sie accessibility-compliance bei einer echten Design-Review-Aufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie accessibility-compliance über den SKILL.md-Link, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen