Accessibility Auditvon Alireza Rezvani

Accessibility Audit Skill.

Halten Sie jeden Befund zur Barrierefreiheit mit dem betroffenen Element, der vorgeschlagenen Korrektur und dem Verifikationsergebnis verknüpft.

Barrierefreiheit
Design-Review
Frontend

OpenDesign herunterladen Nutzungsanleitung ansehen

Quellcode-Review · Accessibility AuditSKILL.md

Aufgabe Barrierefreiheit Ergebnis • Ein nach Schweregrad geordneter Bericht zu Barrierefreiheitsbefunden • Code-Korrekturen im Vorher-Nachher-Format, passend zum Framework des Projekts • Ein Vergleich mit den ursprünglichen Befunden und eine Liste verbleibender manueller Prüfungen Vor dem Start Python für die mitgelieferten Tools, Zugriff auf den Quellcode sowie ein Browser oder ein Setup mit assistiven Technologien für die kontextbezogene Validierung.

Redaktionelle Zusammenfassung · Quelle geprüft am 2026-10-07 · kein generiertes Beispiel

01 Funktionen

Befunde zur Barrierefreiheit in überprüfbare Korrekturen verwandeln

Ein Barrierefreiheits-Workflow aus Scannen, Korrigieren und Verifizieren mit Python-Hilfsprogrammen, Framework-Referenzen und Berichtsvorlagen.

Quellenbasierter WorkflowKein Ausführungs-Benchmark

Die Arbeitsweise

A11y Audit gliedert die Arbeit an der Barrierefreiheit in die Phasen Scannen, Korrigieren und Verifizieren. Die Quelle enthält Python-Schnittstellen für Scanner und Kontrastprüfung, Schweregradkategorien und frameworkspezifische Referenzen zur Behebung. Der Skill kann helfen, eine vage Bitte um bessere Barrierefreiheit in eine eingegrenzte Liste von Elementen und Codeänderungen zu überführen.

Die Quelle beschreibt eine breite WCAG-Abdeckung, doch ein Code-Scan sollte nicht als vollständige Konformitätszertifizierung dargestellt werden. Tastaturabläufe, Screenreader-Verhalten, dynamische Inhalte und die Brauchbarkeit von Alternativtexten erfordern weiterhin eine kontextbezogene Prüfung. Der praktische Nutzen liegt in der Nachvollziehbarkeit: Behalten Sie die ursprünglichen Befunde bei, wenden Sie geeignete native Semantik oder Stiländerungen an, führen Sie dann die Prüfungen erneut aus und testen Sie die tatsächliche Interaktion.

Erwartete Ergebnisse

Ein nach Schweregrad geordneter Bericht zu Barrierefreiheitsbefunden
Code-Korrekturen im Vorher-Nachher-Format, passend zum Framework des Projekts
Ein Vergleich mit den ursprünglichen Befunden und eine Liste verbleibender manueller Prüfungen

Beispiel-Briefing ansehen

Vom Briefing zum Review

01
Einen definierten Umfang scannen
Bestimmen Sie das Framework und die relevanten Quellpfade. Halten Sie Befunde auf Elementebene fest und unterscheiden Sie Scanner-Funde von manuellen Beobachtungen.
02
Die zugrunde liegende Interaktion korrigieren
Bevorzugen Sie native Steuerelemente, aussagekräftige Beschriftungen und sichtbaren Fokus, statt wahllos ARIA-Attribute hinzuzufügen.
03
Im Kontext verifizieren
Vergleichen Sie mit der Ausgangsbasis, prüfen Sie den Kontrast im gerenderten Zustand und testen Sie Tastatur- und Assistive-Technology-Pfade, die statische Analyse nicht abdecken kann.

02 Einsatzbereiche

Wann es sinnvoll ist

Python für die mitgelieferten Tools, Zugriff auf den Quellcode sowie ein Browser oder ein Setup mit assistiven Technologien für die kontextbezogene Validierung.

Gut geeignet

Planung von KorrekturenNützlich, um eine Sammlung von Problemen auf Quellcode-Ebene in priorisierte, überprüfbare Codeänderungen zu überführen.
RegressionsprüfungenPasst zu einem Projekt, das wiederholbare Barrierefreiheitsprüfungen in einen bestehenden Testprozess aufnimmt.

Zu beachtende Grenzen

Kein KonformitätszertifikatDass die enthaltenen Tools ohne Beanstandung durchlaufen, belegt nicht, dass alle zutreffenden Barrierefreiheitsanforderungen im gesamten Produkt erfüllt sind.
Schweregrad braucht KontextDie Schweregradangaben der Quelle dienen der Triage. Die tatsächlichen Auswirkungen auf Nutzende hängen von Element, Aufgabe und verfügbaren Alternativen ab.

Diese Eingaben mitbringen

PrüfumfangNennen Sie die Seiten, Komponenten oder das Quellverzeichnis sowie die untersuchte User Journey.
Gerenderte ZuständeErmöglichen Sie Zugriff auf Formulare, Fehlermeldungen, Dialoge und andere Zustände, die auf einer einfachen statischen Seite fehlen.
Vorhandene AusgangsbasisFügen Sie frühere Befunde oder Testergebnisse bei, damit behobene Probleme und Regressionen getrennt werden können.

03 Wichtige Entscheidungen

Entscheidende Punkte

Korrekturen bleiben nachvollziehbar
Vorher-Nachher-Beispiele verbinden einen Befund mit einer konkreten Umsetzung, statt nur auf einen Standard zu verweisen.
Automatisierung hat Grenzen
Ein brauchbarer Bericht benennt, was gescannt wurde, was manuell getestet wurde und was ungeprüft bleibt.

04 Beispielbriefing

Ein fokussiertes Briefing ausprobieren

Das folgende Beispiel-Briefing wurde nicht getestet. Prüfen Sie die Einrichtung des Skills, bevor Sie es verwenden.

Einrichtung prüfen

Behalten Sie die Skripte und Referenzmuster bei. Prüfen Sie die Abdeckung des Scanners, bevor Sie seine Ergebnisse als Freigabekriterium verwenden.

Quelldatei im Upstream

https://github.com/alirezarezvani/claude-skills/blob/19392f7a08264ed00486a251f5b2098321771f94/engineering-team/a11y-audit/skills/a11y-audit/SKILL.md

Python für die mitgelieferten Tools, Zugriff auf den Quellcode sowie ein Browser oder ein Setup mit assistiven Technologien für die kontextbezogene Validierung.

Mit einem Ergebnis beginnen

Passen Sie Umfang, Quellmaterial und Vorgaben in diesem Briefing an, bevor Sie den Skill ausführen.

Beispiel-Briefing

Verwende a11y-audit, um unser Checkout-Formular und unser Modal zu prüfen. Beginne mit einem schreibgeschützten Befundbericht, der betroffene Elemente und die Begründung des Schweregrads enthält. Prüfe Beschriftungen, native Steuerelemente, Fokussichtbarkeit und Kontrast und liste anschließend manuelle Tastatur- und Screenreader-Prüfungen auf. Bezeichne die Seite nicht allein aufgrund des Scanners als WCAG-konform und wende keine Korrekturen an, bevor ich sie freigegeben habe.

Das Ergebnis prüfen

Prüfen Sie die tatsächliche Ausgabe anhand dieser beobachtbaren Kriterien.

Jeder Befund benennt ein tatsächliches Element und eine umsetzbare Korrektur.
Behobene Probleme werden gegen die ursprüngliche Ausgangsbasis erneut geprüft.
Ungetestetes Verhalten bei Tastatur, Screenreader und dynamischen Zuständen bleibt ausdrücklich unverifiziert.

OpenDesign bietet einen lokalen Design-Arbeitsbereich für Coding-Agenten. Diese Aufführung bedeutet nicht, dass der Skill mitgeliefert wird oder dass seine externen Tools, Zugangsdaten und Software-Abhängigkeiten enthalten sind.

OpenDesign herunterladen Quickstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte, festgelegte Quellrevision. Verhalten und Anforderungen im Upstream können sich ändern.

Quellen-Inhaber: Alireza Rezvani
Repository: alirezarezvani/claude-skills
Skill-Datei: engineering-team/a11y-audit/skills/a11y-audit/SKILL.md
Lizenz: MIT
Geprüfter Snapshot: 2026-10-07 · 19392f7a0826

Redaktionelle Quellenzusammenfassung

Ein Barrierefreiheits-Workflow aus Scannen, Korrigieren und Verifizieren mit Python-Hilfsprogrammen, Framework-Referenzen und Berichtsvorlagen.

Originalzusammenfassung von OpenDesign auf Grundlage der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, weder ein Maß für die Skill-Nutzung noch eine Qualitätsbewertung.

06 Fragen vor dem Start

Fragen vor dem Start

Kann der Scanner die WCAG-Konformität belegen?

Nein. Der Skill kann ein Audit unterstützen, doch automatisierte Quellcode-Prüfungen decken nicht jede kontextbezogene oder interaktionsbezogene Anforderung ab.

Wird nur React unterstützt?

Die Quelle enthält Muster für mehrere Web-Frameworks und für einfaches HTML. Prüfen Sie die tatsächliche Unterstützung durch Scanner und Referenzen für die Version Ihres Projekts.

Sollte jedes anklickbare Element eine ARIA-Rolle erhalten?

Nicht automatisch. Die Quelle bevorzugt in der Regel native semantische Steuerelemente, die Verhalten mitbringen, das eine ARIA-Rolle allein nicht ergänzt.

OpenDesign

Schaffen Sie Raum für die nächste Design-Iteration.

Halten Sie Briefing, Quellmaterial und Designarbeit in einem lokalen Arbeitsbereich zusammen. Prüfen Sie die Einrichtung des Skills selbst, bevor Sie ihn in Ihren Workflow aufnehmen.

OpenDesign herunterladen Design-Skills durchstöbern