accessibility-compliance

Überblick über den accessibility-compliance-Skill

Was der accessibility-compliance-Skill leistet

Der accessibility-compliance-Skill hilft einem Agenten dabei, umsetzungsreife Empfehlungen für barrierefreie Web- und Mobile-UIs zu liefern. Der Fokus liegt klar auf WCAG 2.2, dem sinnvollen Einsatz von ARIA, Tastaturbedienbarkeit, Screenreader-Unterstützung und mobiler Barrierefreiheit. Er eignet sich besonders für Teams, die an echten Oberflächen arbeiten — nicht für alle, die nur eine allgemeine Accessibility-Checkliste formulieren wollen.

Für wen sich accessibility-compliance lohnt

Dieser Skill passt gut für:

• UX-Auditoren, die accessibility-compliance for UX Audit brauchen
• Frontend-Entwickler, die Accessibility-Probleme in Komponenten beheben
• Design-System-Teams, die barrierefreie Interaktionsmuster definieren
• Produktteams, die Formulare, Dialoge, Menüs und andere interaktive UI ausliefern
• Mobile- oder Cross-Platform-Teams, die Hinweise mit Blick auf VoiceOver und TalkBack benötigen

Wenn eure Aufgabe lautet: „Mach aus diesem Screen oder dieser Komponente mit konkreten Korrekturen etwas, das näher an WCAG-konform ist“, ist dieser Skill deutlich nützlicher als ein breit formulierter Design-Prompt.

Warum sich dieser Skill von einem generischen Prompt unterscheidet

Der Hauptwert des accessibility-compliance skill liegt darin, dass er das Modell auf praktische Accessibility-Implementierungsmuster ausrichtet statt auf vage Grundsätze. Das Repository enthält gezielte Referenzen zu:

• references/wcag-guidelines.md
• references/aria-patterns.md
• references/mobile-accessibility.md

Dadurch ist er besser geeignet für Aufgaben wie die Entscheidung für semantisches HTML statt ARIA, die Strukturierung barrierefreier Formulare, die Verbesserung des Tastaturverhaltens oder die Prüfung von Vorgaben für Touch Targets auf Mobilgeräten.

Worauf Nutzer vor der Installation achten

Die meisten, die accessibility-compliance install bewerten, wollen vor allem wissen:

• ob der Skill konkrete, code-nahe Korrekturen liefert statt Policy-Sprache
• ob er sowohl Web- als auch Mobile-Themen abdeckt
• ob er bei Audits ebenso hilft wie bei der Umsetzung
• ob er klar zwischen nativer Semantik und ARIA priorisiert
• ob er Rückfragen und Schleifen bei der Review von UI-Komponenten reduzieren kann

In diesen Punkten wirkt der Skill überzeugend. Seine größte Stärke ist die praktische Breite aus WCAG-Konzepten, ARIA-Patterns und mobiler Barrierefreiheit in einem Paket.

Best-Fit- und Misfit-Fälle

Best Fit:

• Audits interaktiver Komponenten
• das Beheben von Accessibility-Problemen in bestehendem Code
• die Planung barrierefreien Verhaltens für Dialoge, Accordions, Formulare und Navigation
• die Prüfung von Fokusreihenfolge, Labels, Ankündigungen und Unterstützung für reduzierte Bewegung

Misfit:

• rechtliche Compliance-Auslegung für eine bestimmte Jurisdiktion
• ein eigenständiges Setup für automatisierte Tests
• pixelgenaue Visual-Design-Kritik ohne Accessibility-Bezug
• tiefgehende plattformspezifische Native-APIs jenseits der referenzierten Hinweise

So nutzt man den accessibility-compliance-Skill

Installationskontext und Aufruf

Das übergeordnete SKILL.md enthält keinen Installationsbefehl. Nutzer des Verzeichnisses werden den Skill daher typischerweise direkt aus dem Repo hinzufügen:

npx skills add https://github.com/wshobson/agents --skill accessibility-compliance

Anschließend solltet ihr ihn mit einer konkreten Accessibility-Aufgabe aufrufen, nicht nur mit „check accessibility“. Der Skill funktioniert am besten, wenn die Anfrage eine Komponente, einen Ablauf oder einen Screen mit genügend Struktur zur Prüfung enthält.

Diese Dateien zuerst lesen

Für einen schnellen Einstieg startet hier:

1. plugins/ui-design/skills/accessibility-compliance/SKILL.md
2. plugins/ui-design/skills/accessibility-compliance/references/wcag-guidelines.md
3. plugins/ui-design/skills/accessibility-compliance/references/aria-patterns.md
4. plugins/ui-design/skills/accessibility-compliance/references/mobile-accessibility.md

Diese Reihenfolge spiegelt die Praxis in vielen Teams gut wider: erst das Compliance-Ziel, dann die Implementierungsmuster, danach die plattformspezifischen Randfälle.

Welche Eingaben der Skill braucht, um gut zu arbeiten

Die Qualität von accessibility-compliance usage hängt stark davon ab, wie konkret eure Eingabe ist. Gebt möglichst an:

• Komponenten- oder Seitentyp
• aktuellen Code oder Markup
• Framework (React, Next.js, Vue, plain HTML, React Native)
• Interaktionsverhalten
• Zielstandard, meist WCAG 2.2 AA
• Gerätekontext: Desktop-Web, Mobile-Web, iOS, Android
• bekannte Probleme aus Audit-Tools oder User Testing

Schwache Eingabe:

• „Make this accessible.“

Starke Eingabe:

• „Review this React modal for WCAG 2.2 AA. Check keyboard trap behavior, focus return, accessible name/description, escape handling, and screen reader announcements. Suggest code changes before release.”

Aus einem groben Ziel einen guten Prompt machen

Ein guter Prompt für den accessibility-compliance guide besteht in der Regel aus fünf Teilen:

1. Ziel-UI
2. Nutzerinteraktionen
3. Compliance-Ziel
4. erwartetes Ergebnis
5. Einschränkungen

Beispiel:

• „Use the accessibility-compliance skill to audit this checkout form for WCAG 2.2 AA. Identify failures by issue, explain user impact, and provide corrected JSX for labels, error messaging, field grouping, and keyboard flow. Keep the current visual design if possible.”

Das ist besser, als einfach nach „best practices“ zu fragen, weil das Modell dadurch gezwungen wird, Ergebnisse zu liefern, die sich tatsächlich umsetzen lassen.

Bester Workflow für ein UX-Audit

Für accessibility-compliance for UX Audit empfiehlt sich diese Abfolge:

1. nach der Identifikation von Problemen fragen
2. nach Schweregrad und Nutzerwirkung fragen
3. nach zugeordneten Korrekturen fragen
4. nach überarbeitetem Markup oder Komponenten-Code fragen
5. nach einer Checkliste für den Re-Test fragen

So vermeidet ihr den typischen Fehler, dass die erste Antwort zu konzeptionell bleibt. Der Skill ist am nützlichsten, wenn ihr ihn von Audit-Befunden gezielt in Umsetzungsdetails weiterführt.

accessibility-compliance für Komponenten, nicht nur für ganze Seiten nutzen

Der Skill ist besonders stark bei wiederverwendbaren Interaktionsmustern. Gute Einsatzfelder sind:

• Dialoge und Fokusfallen
• Accordions
• Menüs und Disclosure-Patterns
• Formulare und Validierung
• Tabs
• Karussells
• Icon Buttons
• mobile Touch Targets

Genau an diesen Stellen übertreiben generische Prompts oft den Einsatz von ARIA oder übersehen Tastatur- und Screenreader-Verhalten.

Was die Referenzen praktisch bedeuten

Die mitgelieferten Referenzen deuten auf drei wichtige Arbeitsregeln hin:

• zuerst semantisches HTML bevorzugen, bevor ARIA ergänzt wird
• WCAG 2.2 AA als Standard-Basis ansetzen
• mobile Barrierefreiheit berücksichtigen, nicht nur Tastaturbedienung auf dem Desktop

Das ist in der Praxis entscheidend. Ein guter Prompt sollte den Agenten ausdrücklich anweisen, unnötiges ARIA zu vermeiden und jedes ergänzte ARIA-Attribut zu begründen.

Prompt-Muster für stärkere Ergebnisse

Verwendet ein Anfrageformat wie dieses:

• Context: “This is a React checkout drawer.”
• Target: “Meet WCAG 2.2 AA.”
• Review scope: “Keyboard access, focus order, visible labels, error association, live region announcements.”
• Constraints: “Do not rewrite the design system API.”
• Deliverable: “Return prioritized issues, corrected JSX, and a manual test checklist.”

Diese Struktur liefert bei accessibility-compliance usage durchgehend bessere Ergebnisse als offene Review-Anfragen.

Was ihr von der Ausgabe erwarten solltet

Eine gute Antwort des accessibility-compliance-Skills sollte enthalten:

• eine Problemliste mit Bezug zur Nutzerwirkung
• Verweise auf Accessibility-Prinzipien oder Kriterien
• konkrete Änderungen an Markup oder Code
• Hinweise zu Tastatur- und Fokusverhalten
• Empfehlungen zu Benennung und Ankündigungen für Screenreader
• mobile-spezifische Hinweise, wenn relevant

Wenn die Ausgabe bei Grundsätzen stehenbleibt und keine codebezogenen Korrekturen enthält, ist euer Prompt zu allgemein.

accessibility-compliance-Skill FAQ

Ist accessibility-compliance auch für Einsteiger geeignet?

Ja, sofern ihr die Grundstruktur von UIs bereits versteht. Der Skill liefert mehr Mehrwert, wenn ihr Markup, Komponenten oder Audit-Ergebnisse bereitstellen könnt. Einsteiger können ihn trotzdem nutzen, sollten aber mit Rückfragen rechnen, warum bestimmte semantische Entscheidungen oder ARIA-Wahlen wichtig sind.

Ist das besser als ein normaler Accessibility-Prompt?

Für Implementierungsarbeit meistens ja. Ein normaler Prompt liefert oft sehr allgemeine Hinweise wie „add alt text“ oder „ensure keyboard navigation“. Der accessibility-compliance skill bleibt eher an WCAG 2.2, ARIA-Patterns und den Mobile-Accessibility-Themen aus den Repository-Referenzen verankert.

Ersetzt der Skill automatisierte Accessibility-Tests?

Nein. Er ergänzt automatisierte Tools und manuelle Reviews. Nutzt ihn, um Probleme einzuordnen, Korrekturen vorzuschlagen und Komponentenverhalten zu prüfen, das statische Tools oft nicht erfassen — etwa Fokusmanagement, Timing von Ankündigungen oder Details mobiler Interaktionen.

Wann sollte ich accessibility-compliance nicht verwenden?

Lasst den Skill aus, wenn ihr Folgendes braucht:

• Rechtsberatung oder Zertifizierungsentscheidungen
• vollständig automatisiertes Scanning über die gesamte Codebasis
• tiefgehende native Mobile-Plattformdetails jenseits der referenzierten Patterns
• UX-Kritik ohne Accessibility-Bezug

Es ist ein Guidance-Skill, keine Compliance-Garantie.

Unterstützt der Skill mobile Barrierefreiheit gut?

Für einen AI-Skill: ziemlich ordentlich. Die eigene Referenz mobile-accessibility.md deckt Touch-Target-Größen, Abstände und Screenreader-Aspekte für iOS und Android ab. Dadurch ist dieser Skill für Mobile-Reviews glaubwürdiger als Accessibility-Prompts, die sich nur auf Desktop-Web konzentrieren.

Kann ich den Skill für Design-System-Arbeit nutzen?

Ja. Er eignet sich gut, um barrierefreie Standards für wiederverwendbare Komponenten festzulegen — besonders dort, wo Semantik, Tastaturverhalten, ARIA-Status und Fokusmanagement über viele Produkte hinweg konsistent bleiben müssen.

So verbessert ihr den accessibility-compliance-Skill

Dem accessibility-compliance-Skill echte Artefakte geben, nicht nur Zusammenfassungen

Der schnellste Weg zu besseren accessibility-compliance-Ergebnissen ist, echtes JSX, HTML, React-Native-Code, Screenshots mit Annotationen oder eine Schritt-für-Schritt-Beschreibung der Interaktion zu liefern. Der Skill kann Fokusreihenfolge, Labels oder Ankündigungen aus vagen Produktzusammenfassungen nicht zuverlässig ableiten.

Nach Problem-Mapping fragen, nicht nur nach Empfehlungen

Eine stärkere Anfrage ist:

• “List each issue, affected users, violated principle or criterion, and exact fix.”

Das drängt das Modell zu auditierbaren Ergebnissen. Ohne diese Struktur driften Antworten schnell in allgemeine Ratschläge ab.

Den akzeptablen Änderungsgrad klar angeben

Accessibility-Korrekturen stehen oft im Spannungsfeld zu Design-System-Vorgaben. Sagt ausdrücklich, ob der Agent:

• nur das Markup ändern darf
• ARIA nur dort ergänzen soll, wo es nötig ist
• die Komponenten-Hierarchie umstrukturieren darf
• Copy zur besseren Verständlichkeit anpassen darf
• Interaktionsmuster ändern darf, wenn das aktuelle Design nicht barrierefrei ist

Das beeinflusst die Ergebnisqualität stärker, als viele erwarten.

Häufiger Fehler: ARIA wird überbenutzt

Ein typisches Problem bei Accessibility-Arbeit ist, dass ARIA ergänzt wird, obwohl natives HTML die bessere Lösung wäre. Verbessert die Ausgabe mit einer klaren Vorgabe:

• “Prefer native semantic elements and only use ARIA when native semantics are insufficient.”

Diese Anweisung passt zur ARIA-Referenz im Repository und reduziert schwache Korrekturvorschläge.

Häufiger Fehler: Zustandsänderungen werden vergessen

Viele erste Antworten erkennen Labels und Fokus, übersehen aber dynamisches Verhalten. Fragt deshalb gezielt nach:

• Fokus beim Eintritt und bei der Rückkehr
• Ankündigungen von expanded/collapsed-Zuständen
• Zuordnung von Validierungsfehlern
• asynchronen Statusmeldungen über Live Regions
• Aspekten zu reduzierter Bewegung und hohem Kontrast, wenn relevant

Diese Details verbessern den praktischen Wert des accessibility-compliance guide spürbar.

Nach der ersten Antwort iterieren

Nach dem ersten Audit könnt ihr mit einer dieser Anfragen weitermachen:

• “Rewrite the component with the fixes applied.”
• “Prioritize only release-blocking issues.”
• “Convert this into QA test steps.”
• “Explain what should be tested with screen readers.”
• “Separate WCAG AA requirements from nice-to-have AAA improvements.”

So wird aus dem Skill nicht nur ein Reviewer, sondern eine konkrete Umsetzungshilfe.

Repository-Referenzen gezielt nutzen

Lest nicht zuerst das gesamte Repository. Wenn euer Problem ist:

• semantische Struktur oder Compliance-Ziel: startet mit references/wcag-guidelines.md
• Widget-Verhalten oder Rollen: öffnet references/aria-patterns.md
• Touch Targets oder mobile Assistive Technology: öffnet references/mobile-accessibility.md

Dieser gezielte Leseweg macht accessibility-compliance install und die Einführung schneller.

Vertrauen erhöhen, indem ihr Begründungen anfordert

Bittet den Skill darum zu erklären, warum jede Korrektur für Tastaturnutzer, Screenreader-Nutzer, Menschen mit Sehbeeinträchtigung oder Nutzer mit Bewegungsempfindlichkeit relevant ist. So erkennt ihr oberflächliche Fixes schneller und Teams können Implementierungsarbeit in Reviews besser begründen.

Der beste Weg zu produktionsreifen accessibility-compliance-Ergebnissen

Für den höchsten Mehrwert bei accessibility-compliance usage solltet ihr in einem Durchgang all das anfordern:

• priorisierte Findings
• korrigierten Code
• Begründung
• Checkliste zur manuellen Verifikation
• verbleibende Risiken oder Annahmen

Genau dieses Paket brauchen die meisten Teams, um von „wir sollten die Barrierefreiheit verbessern“ zu „wir können das jetzt umsetzen und verifizieren“ zu kommen.