fixing-accessibilityvon Julien Thibeaut

Fixing Accessibility Skill.

Ein Claude Code und Codex Skill für Design Review: prüft und behebt ARIA-, Tastatur-, Fokus-, Kontrast- und Formularfehler.

Design Review & Accessibility
Review-Bericht

OpenDesign herunterladen Anleitung ansehen

ibelick/ui-skills · skills/fixing-accessibility/SKILL.mdSKILL.md

--- name: fixing-accessibility description: Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance. --- ## how to use ## when to apply ## rule categories by priority ## common fixes ## review guidance

Metadaten und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 4.714 Zeichen insgesamt

01 Was es tut

Was das fixing-accessibility Skill in Claude Code und Codex tut

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

Ein Referenz- und Fix-Regelwerk für HTML-Barrierefreiheit, gedacht für Designer und Entwickler, die interaktive UI in einem Coding-Agent hinzufügen oder überprüfen. Es rangiert neun Regelkategorien nach Priorität und Wirkung, von zugänglichen Namen, Tastaturzugriff, Fokus und Dialogen sowie Tool-Grenzen bei kritisch bis hin zu Semantik, Formularen und Fehlern, Ankündigungen, Kontrast und Zuständen, hinunter zu Medien und Bewegung.

Jede Kategorie ist eine kurze Liste konkreter Anforderungen, etwa aria-label bei reinen Icon-Buttons, kein tabindex über 0 und aria-invalid bei fehlerhaften Feldern. Ein gemeinsamer Fixes-Block zeigt Vorher-Nachher-HTML für reine Icon-Buttons, div-als-Button und nicht verknüpfte Formularfehler, und der Review-Modus meldet jeden Verstoß mit der zitierten Zeile, einem Satz zur Begründung und einer Fix-Lösung auf Code-Ebene.

Prüfbericht

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Die Einschränkungen direkt anwenden
Das reine Ausführen des Befehls macht die Regeln zu ständigen Einschränkungen für jede UI-Arbeit in dieser Unterhaltung, nicht zu einem einzelnen Prüfdurchgang.
02
Auf eine Datei richten für einen Verstoßbericht
Mit einem Dateiargument prüft es diese Datei gegen alle Regeln und meldet jeden Verstoß als zitierte Zeile oder Ausschnitt, einen kurzen Satz zur Bedeutung und eine Fix-Lösung auf Code-Ebene.
03
Die Kategorien in Prioritätsreihenfolge abarbeiten
Die Regeln sind in nach Priorität geordnete Kategorien mit einer Wirkungsbewertung gruppiert; zugängliche Namen stehen an Priorität 1, als kritisch markiert.
04
Die Änderung minimal halten
Das Skill legt ausdrücklich fest, dass es keine großen Teile der UI umschreiben sollte und dass Fixes minimal und gezielt sein sollten.

02 Finden Sie Ihren Favoriten

Wann das fixing-accessibility Skill verwendet wird

Verwenden Sie den fixing-accessibility-Skill in Claude Code oder Codex, wenn die Aufgabe ein Design-Review dieser Art ist. Eignung und Grenzen unten sind aus der eigenen Datei des Skills übernommen.

Gut geeignet

Hinzufügen oder Ändern von Buttons, Links, Eingabefeldern, Menüs, Dialogen, Tabs oder Dropdowns in einer bestehenden Oberfläche.
Formulare mit Validierung, Fehlerzuständen und Hilfetext erstellen.
Implementieren von Tastaturkürzeln oder anderen benutzerdefinierten Interaktionen.
Arbeiten an Fokuszuständen, Fokus-Trapping oder Modal-Verhalten.
Rendern von Controls, die nur ein Icon zeigen, oder Hinzufügen von reinen Hover-Interaktionen und verstecktem Inhalt.

Grenzen kennen

Refactoring von Code, der nichts mit dem zu behebenden Accessibility-Problem zu tun hat.
Verwenden von rollenbasierten Workarounds, wenn ein natives Button-, Link- oder Input-Element denselben Zweck erfüllen würde.
Automatisches Abspielen von Medien mit Ton.

03 Innerhalb des Skills

Regeln, die das Skill fixing-accessibility Claude Code und Codex vorgibt

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

Benennen Sie jedes reine Icon-Control
Buttons, die nur ein Icon zeigen, müssen über aria-label oder aria-labelledby einen zugänglichen Namen haben, nicht nur ein sichtbares Symbol.
Verwenden Sie niemals ein positives tabindex
tabindex-Werte größer als 0 sind vollständig ausgeschlossen; die Tab-Reihenfolge folgt der natürlichen Sequenz.
Fangen, setzen und stellen Sie den Fokus in Dialogen wieder her
Modals müssen den Fokus einfangen, während sie geöffnet sind, den initialen Fokus innerhalb des Dialogs setzen und den Fokus beim Schließen zum Auslöser zurückführen.
Verknüpfen Sie Fehler mit ihrem Feld
Fehler müssen über aria-describedby mit dem Input verknüpft sein, damit die Meldung zusammen mit dem Feld angesagt wird.
Markieren Sie fehlerhafte Felder als ungültig
Ein ungültiges Feld muss aria-invalid setzen, nicht nur einen Fehler-Stil anzeigen.
Verzichten Sie auf ARIA, wenn native Semantik bereits funktioniert
Fügen Sie kein aria hinzu, wenn native Semantik das Problem bereits löst; dies fällt unter die Tool-Grenzen als kritische Einschränkung.
Halten Sie den Fokus sichtbar
Fokus-Outlines dürfen nicht entfernt werden, sofern kein sichtbarer Ersatz bereitgestellt wird.
Migrieren Sie keine UI-Bibliotheken
Das Austauschen einer UI-Bibliothek liegt außerhalb des Umfangs, sofern der Nutzer nicht ausdrücklich danach fragt.

04 In Betrieb nehmen

fixing-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.

fixing-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/ibelick/ui-skills --skill fixing-accessibility

Allgemeine skills-CLI-Form für skills/fixing-accessibility/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

Dem Skill eine erste Design-Review-Aufgabe geben

Die SKILL.md enthält keinen Beispiel-Prompt; dieser Starter ist aus der Katalog-Einzeiler geschrieben. Ersetzen Sie die Aufgabenzeile mit Ihrem echten Briefing.

Starter prompt

Use the fixing-accessibility skill on the material I attach. What the skill should do here: Audits and fixes ARIA, keyboard, focus, contrast, and form errors. Rules: do not invent copy, data or brand assets. State your plan first, then produce the result and tell me what to check.

Quelle: Starter-Prompt geschrieben aus der Katalog-Einzeilen-Verwendung (nicht aus der SKILL.md).

Das erste Ergebnis prüfen

Prüfen Sie vor Annahme der Ausgabe Folgendes im Transkript und in den Dateien:

Das Ergebnis wird als Review-Bericht geliefert, wie es der Katalog für dieses Skill auflistet.
Der Agent nennt den fixing-accessibility Skill in seinem Plan oder Protokoll, bevor er das Ergebnis erzeugt.
Ihre eigenen Inhalte, Namen und Zahlen erscheinen unverändert in der Ausgabe.

In OpenDesign importieren Sie fixing-accessibility über den SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es anschließend 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: Julien Thibeaut
Repository: github.com/ibelick/ui-skills Branch main
Skill-Datei: skills/fixing-accessibility/SKILL.md Inhaltsprüfsumme bei Verifizierung aufgezeichnet; Commit 79081ab
License: MIT Aus LICENSE.
Repository-Sterne: 8.402 GitHub-Snapshot vom 14.09.2026 für das gesamte ibelick/ui-skills Repository, das 5 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für fixing-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

„Prüft und behebt HTML-Barrierefreiheitsprobleme einschließlich ARIA-Labels, Tastaturnavigation, Fokus-Management, Farbkontrast und Formularfehler. Verwenden, wenn interaktive Steuerelemente, Formulare, Dialoge hinzugefügt oder WCAG-Konformität geprüft werden."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 4.714 Zeichen. Lesen Sie die vollständige Datei auf GitHub.

Fixing Accessibility

fixing-accessibility bei einer echten Design-Überprüfungsaufgabe ausführen.

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

OpenDesign herunterladen Alle Skills durchsuchen

Terminal

npx skills add https://github.com/ibelick/ui-skills --skill fixing-accessibility

Was das fixing-accessibility Skill in Claude Code und Codex tut

In den eigenen Worten des Skills

So funktioniert es

Wann das fixing-accessibility Skill verwendet wird

Gut geeignet

Grenzen kennen

Regeln, die das Skill fixing-accessibility Claude Code und Codex vorgibt

Benennen Sie jedes reine Icon-Control

Verwenden Sie niemals ein positives tabindex

Fangen, setzen und stellen Sie den Fokus in Dialogen wieder her

Verknüpfen Sie Fehler mit ihrem Feld

Markieren Sie fehlerhafte Felder als ungültig

Verzichten Sie auf ARIA, wenn native Semantik bereits funktioniert

Halten Sie den Fokus sichtbar

Migrieren Sie keine UI-Bibliotheken