Fähigkeiten fixing-accessibility
♿

fixing-accessibility

Sicher

Barrierefreiheitsprobleme beheben

Barrierefreiheitsprobleme können Nutzer mit Behinderungen davon ausschließen, Ihr Produkt zu nutzen. Diese Skill bietet klare Regeln und praktische Lösungen für häufige Barrierefreiheitsprobleme in UI-Komponenten.

Unterstützt: Claude Codex Code(CC)
🥉 73 Bronze
1

Die Skill-ZIP herunterladen

2

In Claude hochladen

Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen

3

Einschalten und loslegen

Teste es

Verwendung von "fixing-accessibility". /fixing-accessibility button.jsx

Erwartetes Ergebnis:

  • Verstoß: Icon-Button hat keinen barrierefreien Namen (Zeile 5)
  • Warum wichtig: Screen-Reader-Nutzer können die Button-Aktion nicht identifizieren
  • Fix: Fügen Sie aria-label oder aria-labelledby hinzu, um einen barrierefreien Namen bereitzustellen

Verwendung von "fixing-accessibility". How do I make a modal dialog accessible?

Erwartetes Ergebnis:

  • Wichtige Anforderungen für barrierefreie Modals:
  • 1. Fokus innerhalb des Dialogs einfangen, während er geöffnet ist
  • 2. Fokus beim Schließen auf das auslösende Element zurücksetzen
  • 3. Fokus auf das erste interaktive Element setzen
  • 4. Bei Drücken der Escape-Taste schließen
  • 5. Sicherstellen, dass aria-modal und role='dialog' korrekt gesetzt sind

Sicherheitsaudit

Sicher
v1 • 2/16/2026

All static findings are false positives. The skill is a benign accessibility guidelines document containing slash commands for invoking the skill and technical terms related to accessibility (aria-invalid, aria-describedby). No actual security risks detected.

1
Gescannte Dateien
120
Analysierte Zeilen
0
befunde
1
Gesamtzahl Audits
Keine Sicherheitsprobleme gefunden

Erkannte Muster

False Positive: External Commands DetectionFalse Positive: Weak Cryptographic AlgorithmFalse Positive: System Reconnaissance
Auditiert von: claude

Qualitätsbewertung

38
Architektur
100
Wartbarkeit
85
Inhalt
50
Community
100
Sicherheit
83
Spezifikationskonformität

Was du bauen kannst

Barrierefreiheitsregeln auf neue UI anwenden

Beim Erstellen neuer Buttons, Formulare oder Dialoge rufen Sie die Skill auf, um sicherzustellen, dass alle Arbeiten von Anfang an bewährte Barrierefreiheitspraktiken befolgen.

Vorhandenen Code auf Probleme prüfen

Führen Sie die Skill gegen vorhandenen UI-Code aus, um Barrierefreiheitsverstöße zu identifizieren, deren Auswirkungen zu verstehen und gezielte Fix-Vorschläge zu erhalten.

Bewährte Barrierefreiheitspraktiken lernen

Nutzen Sie die Skill als Referenzhandbuch, um mehr über Tastaturzugriff, Fokus-Management, ARIA-Nutzung und semantisches HTML zu erfahren.

Probiere diese Prompts

Auf aktuelle Arbeit anwenden 
/fixing-accessibility

Apply these constraints to any UI work in this conversation.
Bestimmte Datei prüfen 
/fixing-accessibility <file>

Review the file against all rules below and report violations (quote the exact line or snippet), explain why it matters (one short sentence), and provide a concrete fix (code-level suggestion).
Einen Button beheben 
How do I make an icon-only button accessible?
Formularfehler beheben 
How should I associate error messages with form fields for accessibility?

Bewährte Verfahren

  • Bevorzugen Sie minimale, gezielte Fixes gegenüber großem Refactoring, um Risiken zu reduzieren
  • Verwenden Sie native HTML-Elemente vor dem Hinzufügen von ARIA-Attributen
  • Testen Sie die Tastaturnavigation nach dem Anwenden von Fixes manuell
  • Zitieren Sie exakte Code-Snippets bei der Meldung von Verstößen

Vermeiden

  • Verwenden Sie keine div oder span als Buttons ohne vollständige Tastaturunterstützung
  • Fügen Sie keine ARIA-Attribute hinzu, wenn native Semantik das Problem bereits löst
  • Entfernen Sie keine Fokus-Outlines ohne eine sichtbare Alternative bereitzustellen
  • Verlassen Sie sich nicht ausschließlich auf Farbe, um Zustand oder Bedeutung zu vermitteln

Häufig gestellte Fragen

Was ist die Prioritätsreihenfolge für das Beheben von Barrierefreiheitsproblemen?
Die Prioritätsreihenfolge ist: barrierefreie Namen (kritisch), Tastaturzugriff (kritisch), Fokus und Dialoge (kritisch), Semantik (hoch), Formulare und Fehler (hoch), Ankündigungen (mittel-hoch), Kontrast und Zustände (mittel), Medien und Bewegung (mittel-niedrig) und Tool-Grenzen (kritisch).
Behebt diese Skill Barrierefreiheitsprobleme automatisch?
Nein. Die Skill meldet Verstöße mit Erklärungen und Fix-Vorschlägen, aber Sie müssen die Fixes manuell auf Ihren Code anwenden.
Was sind barrierefreie Namen und warum sind sie wichtig?
Barrierefreie Namen sind das, was Screen-Reader für interaktive Elemente ansagen. Jeder Button, Link und Input muss einen aussagekräftigen barrierefreien Namen haben, damit Nutzer mit Sehbehinderungen die Oberfläche verstehen und navigieren können.
Wann sollte ich ARIA gegenüber nativem HTML verwenden?
Bevorzugen Sie immer native HTML-Elemente mit integrierter Barrierefreiheit. Verwenden Sie ARIA nur, wenn native Elemente die erforderliche Semantik nicht ausdrücken können. Denken Sie daran: Wenn Sie einen nativen Button verwenden können, verwenden Sie kein div mit role='button'.
Wie teste ich, ob meine Barrierefreiheits-Fixes funktionieren?
Verwenden Sie nur-Tastatur-Navigation (Tab, Shift+Tab, Enter, Escape), Screen-Reader-Tests (NVDA, VoiceOver) und Browser-Barrierefreiheits-Inspektoren. Die Skill bietet Anleitungen, ersetzt aber keine manuellen Tests.
Was ist Fokus-Einfangung in Dialogen?
Fokus-Einfangung hält den Tastaturfokus innerhalb eines modalen Dialogs, während er geöffnet ist. Nutzer sollten nicht in der Lage sein, auf Elemente hinter dem Dialog zu tabben. Wenn der Dialog geschlossen wird, muss der Fokus auf das Element zurückkehren, das ihn geöffnet hat.

Entwicklerdetails

Autor

ibelick

Lizenz

MIT

Repository

https://github.com/ibelick/ui-skills/tree/main/skills/fixing-accessibility/

Ref

main

Dateistruktur

📄 SKILL.md