Entwicklung
Accessibility Audit (WCAG 2.2)
WCAG-2.2-Referenz für Agents: Barrierefreiheit prüfen und Code-Fixes umsetzen
Redaktion: Josef Wilhelm · Zuletzt geprüft am
Dieser Skill liefert einem Agent kompaktes Fachwissen zu WCAG 2.2, gegliedert nach den vier POUR-Prinzipien Perceivable, Operable, Understandable und Robust. Enthalten sind konkrete HTML-, CSS- und JavaScript-Beispiele für typische Probleme wie fehlende Alt-Texte, unzureichenden Farbkontrast, nicht per Tastatur bedienbare Elemente oder fehlerhafte Formularlabels – jeweils mit Vorher-Nachher-Vergleich. Auch neuere Kriterien der Version 2.2 wie Zielgrößen, Fokus-Sichtbarkeit und barrierefreie Authentifizierung werden abgedeckt.
Zusätzlich zur Referenzdokumentation bringt der Skill eine Testing-Checkliste mit Befehlen für Lighthouse und axe-core sowie Hinweise für manuelle Prüfungen mit Screenreadern und Tastaturnavigation. Er besteht ausschließlich aus Markdown-Dateien ohne ausführbaren Code oder externe Netzwerkzugriffe und eignet sich für Teams, die Agents bei Accessibility-Audits, Code-Reviews oder der gezielten Behebung von WCAG-Verstößen unterstützen wollen.
Quelle: GitHub-Repository addyosmani/web-quality-skills · SKILL.md des Skills
Praxistest
Unser Test: Accessibility Audit (WCAG 2.2) im Einsatz
- Datum
- Werkzeug
- Claude Code 2.1.291 (Modell laut Sitzungsprotokoll: claude-opus-5-5)
- Getesteter Skill
- accessibility
- Aufgabe
- Wir haben eine kleine Kontaktseite mit typischen Barrieren gebaut: Navigation und Absenden-Button als div mit onclick, Felder ohne Label, hellgraue Schrift auf Weiß, entfernter Fokusrahmen, Bild ohne Alt-Text. Aufgabe: Nenne die fünf schwerwiegendsten Probleme und wie ich sie behebe.
- Ergebnis
- Claude Code hat den Skill aufgerufen und die Seite gelesen. Die fünf Punkte: Navigation und Button sind nicht per Tastatur bedienbar, Formularfelder haben keine Labels, der Kontrast ist zu niedrig, der Fokusrahmen ist entfernt, Bild und Icon-Button haben keine Textalternative. Jeder Punkt hat eine WCAG-Nummer (WCAG sind die internationalen Richtlinien für barrierefreie Webseiten), die Zeile im Code und einen Code-Fix. Für den Kontrast gibt die Antwort Werte an, zum Beispiel etwa 2,8 zu 1 für #999 auf Weiß bei einem Mindestwert von 4,5 zu 1.
- Grenzen
- Nur Quelltext geprüft. Es lief kein Lighthouse, kein axe und kein Screenreader. Die Kontrastwerte hat das Modell selbst berechnet. Unsere Stichprobe für #999 auf Weiß passt zu etwa 2,8 zu 1. Die anderen haben wir nicht nachgerechnet. Der Skill enthält Regel- und Referenzdateien, aber keine Skripte.
- Dauer
- 28 Sekunden
Skripte des Skills haben wir dabei nicht ausgeführt. Der Skill lag nur als Textdateien im Projektordner, und Claude Code hatte kein Bash.
FAQ
Häufige Fragen zu Accessibility Audit (WCAG 2.2)
- Führt der Skill selbst Accessibility-Tests aus oder generiert er Code?
- Nein. Der Skill besteht ausschließlich aus Markdown-Dateien mit Referenzwissen, Code-Beispielen und einer Testing-Checkliste. Er enthält keine ausführbaren Skripte und macht keine Netzwerkzugriffe – die tatsächliche Prüfung übernimmt der Agent, etwa mit Lighthouse oder axe-core, wofür der Skill Befehle und Anleitungen liefert.
- Muss man WCAG 2.2 bereits kennen, um den Skill sinnvoll einzusetzen?
- Nein, das ist gerade der Zweck des Skills. Er strukturiert die Kriterien nach den vier POUR-Prinzipien und zeigt zu jedem Problem ein konkretes Vorher-Nachher-Beispiel in HTML, CSS oder JavaScript, sodass ein Agent ohne tiefes A11y-Vorwissen gezielte Fixes vorschlagen oder umsetzen kann.
- Deckt der Skill auch die neuen Kriterien von WCAG 2.2 ab, oder nur die ältere Version 2.1?
- Laut Beschreibung sind die 2.2-spezifischen Kriterien explizit enthalten, etwa Mindest-Zielgrößen (2.5.8), Fokus-Sichtbarkeit bei überlappenden Elementen (2.4.11) und Anforderungen an barrierefreie Authentifizierung. Ältere POUR-Grundlagen wie Alt-Texte, Farbkontrast und Tastaturbedienbarkeit sind ebenfalls Teil der Referenz.
- Für welche Frameworks oder Tech-Stacks eignet sich der Skill?
- Die Beispiele im Skill sind in reinem HTML, CSS und JavaScript gehalten und damit framework-unabhängig. Konkrete Angaben zu Kompatibilität mit bestimmten Frontend-Frameworks macht die Dokumentation nicht (Stand Juli 2026); die gezeigten Muster wie Fokus-Handling oder ARIA-Attribute lassen sich aber in jede Komponentenbibliothek übertragen.