accessibilityvon Addy Osmani

Accessibility Skill.

Ein Skill für Claude Code und Codex für Design-Review: prüft und verbessert die Web-Barrierefreiheit nach WCAG 2.2.

Design Review & Accessibility
Review-Bericht

OpenDesign herunterladen Anleitung ansehen

addyosmani/web-quality-skills · skills/accessibility/SKILL.mdSKILL.md

--- name: accessibility description: Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible". --- ## Evidence-led audit workflow ## WCAG Principles: POUR ## Conformance levels ## Perceivable ## Operable ## Understandable

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

01 Was es tut

Was der accessibility-Skill 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

Dieser Skill prüft und behebt die Barrierefreiheit von Webinhalten nach WCAG 2.2, gegliedert nach POUR — Perceivable, Operable, Understandable, Robust — sowie nach den Konformitätsstufen A, AA und AAA. Er arbeitet evidenzbasiert: Wenn eine gerenderte Seite verfügbar ist, führen Sie ein Live-Lighthouse-Audit zur Barrierefreiheit durch (lighthouse_audit mit Chrome DevTools MCP), nutzen die fehlgeschlagenen Nodes, um die Komponente zu lokalisieren, prüfen den Accessibility-Tree mit take_snapshot, beheben dann den Quellcode und führen das Audit erneut aus.

Fehlen die Live-Tools, decken Lighthouse CLI oder axe die automatisierte Hälfte ab, und dieselben manuellen Prüfungen gelten weiterhin. Enthalten sind Regeln auf Codeebene für Alt-Text, Kontrastverhältnisse, Fokussichtbarkeit, Zielgröße, reduzierte Bewegung, Formularfehler und barrierefreie Authentifizierung, dazu eine Triage-Liste nach kritisch, schwerwiegend und moderat.

Was er erzeugt

Eine priorisierte Problemliste, gruppiert in die Stufen Kritisch (sofort beheben), Schwerwiegend (vor dem Launch beheben) und Moderat (bald beheben), mit benannten Beispielen.
Korrigiertes Markup und einfügefertige Snippets, darunter ein visuell verborgenes Utility, das Icon-Button-Beschriftungen für assistive Technologien zugänglich macht.
Vollständige Referenzimplementierungen in references/A11Y-PATTERNS.md zu Formularlabels, Fokus-Falle im Modal, Skip-Link, ARIA-Tabs, Live-Regionen, Fehlerbehandlung und Screenreader-Befehlen.

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Ein Live-Audit zur Barrierefreiheit durchführen
Beginnen Sie mit einer gerenderten Seite und führen Sie ein Live-Lighthouse-Audit zur Barrierefreiheit durch; nutzen Sie den Mobile-Navigationsmodus für allgemein öffentliche Seiten oder den Snapshot-Modus, wenn ein Neuladen den authentifizierten Zustand verlieren würde.
02
Die fehlerhafte Komponente lokalisieren
Nutzen Sie die fehlgeschlagenen Audit-Nodes, um auf die konkrete Komponente oder das Template zu zeigen, statt das gesamte Repository nach generischen Mustern zu durchsuchen.
03
Den Accessibility-Tree prüfen
Lesen Sie einen gerenderten Snapshot des Accessibility-Trees, um Namen, Rollen, Zustände, Landmarks und die Überschriftenstruktur zu prüfen, und testen Sie den betroffenen Ablauf anschließend mit der Tastatur.
04
Den Quellcode beheben und erneut verifizieren
Ändern Sie den Quellcode statt der gerenderten Ausgabe und wiederholen Sie dasselbe Audit und dieselbe manuelle Interaktion, um die Korrektur zu bestätigen.
05
Auf CLI-Tools zurückgreifen
Wenn Live-Browser-Tools nicht verfügbar sind, kombinieren Sie die Ausgabe von Lighthouse CLI oder axe mit denselben manuellen Prüfungen, denn Automatisierung deckt nur einen Teil der Barrieren ab.

02 Finden Sie Ihren Favoriten

Wann Sie den accessibility-Skill verwenden

Verwenden Sie den accessibility-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

Eine Anfrage, formuliert als a11y-Audit, WCAG-Konformitätsarbeit, Screenreader-Unterstützung, Tastaturnavigation oder „barrierefrei machen“.
Teams, die Level AA anstreben — die Datei behandelt dies als Standardziel und in vielen Rechtsordnungen als gesetzliche Anforderung.
Seiten, bei denen Sticky-Header oder -Footer den Fokusring der Tastatur verschlucken — ein Kriterium, das neu in WCAG 2.2 ist.
Oberflächen, die vollständig ohne Maus bedienbar sein müssen, einschließlich eigener Widgets, die aus nicht interaktiven Elementen aufgebaut sind.

Grenzen kennen

Inline-Textlinks, browsergesteuerte Größenanpassung und Ziele, deren 24px-Kreis kein anderes Ziel überlappt, sind von der Mindestzielgröße ausgenommen.
Stufe AAA gilt als optional und nicht als Anforderung.
Anti-Muster, das die Datei ausdrücklich benennt: einem nativen Button manuelle Tastaturaktivierung hinzuzufügen, wodurch alles doppelt auslöst, weil Enter und Leertaste bereits click auslösen.

Was Sie bereitstellen sollten

Eine gerenderte SeiteDer Live-Workflow beginnt, sobald eine gerenderte Seite vorliegt, denn Audit, Knotenliste und Accessibility Tree stammen alle daraus.
Der Navigationsmodus der SeiteTeilen Sie dem Agent mit, ob es sich um eine allgemein öffentliche Seite handelt oder um einen Ablauf, bei dem ein Neuladen authentifizierten oder vom Nutzer erzeugten Zustand verlieren würde – denn davon hängt der mobile Navigations- oder Snapshot-Modus ab.
Der zu prüfende TastaturablaufSeien Sie bereit, die betroffene Interaktion während des Audits mit der Tastatur durchzugehen, parallel zur Prüfung des Accessibility Tree.

03 Innerhalb des Skills

Regeln, die der Accessibility-Skill Claude Code und Codex vorgibt

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

Zuerst zu einem nativen Element greifen
Native Buttons, Anker-Elemente und Formularfelder bringen Aktivierung per Enter/Leertaste, Fokus und Semantik für assistive Technologien bereits mit. Manuelle Tastaturbehandlung ist daher der letzte Ausweg für Elemente, die Sie nicht ersetzen können.
Fokus sichtbar gestalten
Entfernen Sie niemals Outlines.
Das Mindestmaß von 24 × 24 einhalten
Interaktive Ziele müssen bei AA mindestens 24 × 24 CSS-Pixel groß sein; 44 × 44 gelten als komfortable Touch-Größe für Buttons, Checkboxen und Radio-Beschriftungen.
Animation auf Wunsch neutralisieren
Unter prefers-reduced-motion setzt die Datei Animations- und Übergangsdauern auf 0.01ms, begrenzt die Iterationszahl auf 1 und setzt scroll-behavior auf auto zurück.
Niemals allein mit Farbe signalisieren
Fehlerzustände kombinieren Farbe mit einem Icon und Text; das Markup paart aria-invalid="true" mit aria-describedby, das auf das Fehlermeldungselement zeigt.
Fehler ankündigen und fokussieren
Fehler über role="alert" oder aria-live an Screenreader melden, die betroffenen Felder markieren und beim Absenden den Fokus auf den ersten Fehler setzen.
Authentifizierung kognitiv einfach halten
Login-Abläufe dürfen nicht davon abhängen, sich ein Passwort zu merken oder ein Puzzle zu lösen, es sei denn, Kopieren und Einfügen oder Autofill funktioniert, es gibt eine Alternative wie einen Passkey oder E-Mail-Link, oder der Test nutzt Objekterkennung oder persönliche Inhalte.

04 In Betrieb nehmen

accessibility 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 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/addyosmani/web-quality-skills --skill accessibility

Generische skills-CLI-Form für skills/accessibility/SKILL.md; das Repository kann seinen 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 [page URL or route] with Lighthouse and then fix the accessibility problems in the source. The form inputs in [component path] have no programmatically associated labels, the icon buttons have no accessible names, and focus outlines are being removed on [element]. Re-run the same audit afterwards and check keyboard navigation and target sizes.

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:

Navigieren Sie die gesamte Seite per Tab und aktivieren Sie Steuerelemente mit Enter und Leertaste.

In OpenDesign importieren Sie accessibility über den Link in der SKILL.md: Plugins → Add → Skill → Import from link, und wählen Sie es dann 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: Addy Osmani
Repository: github.com/addyosmani/web-quality-skills Branch main
Skill-Datei: skills/accessibility/SKILL.md Inhaltsprüfsumme bei Verifikation erfasst; Commit afa8da9
License: MIT Aus LICENSE; SKILL.md sagt „MIT".
Repository-Sterne: 2.786 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository addyosmani/web-quality-skills. Keine Bewertung oder Nutzungszählung für accessibility.
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.

Die eigene Beschreibung des Skills

„Web-Barrierefreiheit nach WCAG 2.2-Richtlinien prüfen und verbessern. Verwenden bei ‚improve accessibility', ‚a11y audit', ‚WCAG compliance', ‚screen reader support', ‚keyboard navigation' oder ‚make accessible'."

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

Accessibility

Führen Sie accessibility für eine echte Design-Review-Aufgabe aus.

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

OpenDesign herunterladen Alle Skills durchsuchen

Terminal

npx skills add https://github.com/addyosmani/web-quality-skills --skill accessibility

Was der accessibility-Skill in Claude Code und Codex bewirkt

In den eigenen Worten des Skills

So funktioniert es

Wann Sie den accessibility-Skill verwenden

Gut geeignet

Grenzen kennen

Was Sie bereitstellen sollten

Regeln, die der Accessibility-Skill Claude Code und Codex vorgibt

Zuerst zu einem nativen Element greifen

Fokus sichtbar gestalten

Das Mindestmaß von 24 × 24 einhalten

Animation auf Wunsch neutralisieren

Niemals allein mit Farbe signalisieren

Fehler ankündigen und fokussieren

Authentifizierung kognitiv einfach halten