Barrierefreie Headless-Komponenten
Prüft, ob zusammengesetzte ungestaltete Grundkomponenten Tastatur-, Namens- und Fokusverhalten im Produkt erhalten.
headless-component-accessibility
Entdecke, wie der Skill hilftWann ist der Skill hilfreich?
Nutze dies beim Zusammensetzen von Dialogen, Auswahlelementen oder Menüs.
Wobei hilft er dir?
- Wählt passende native Elemente oder zugängliche Interaktionsmuster.
- Erhält Referenzen, Beschriftungen und Ereignisbehandlung beim Zusammensetzen.
- Testet verschachtelte Fenster, asynchrone Optionen und Screenreaderansagen.
Das könntest du fragen
Prüfe verschachtelten Dialog und durchsuchbare Auswahl nur per Tastatur einschließlich Validierungsfehlern. Öffne die Auswahl im Dialog, wähle ein asynchrones Ergebnis und drücke Escape. Ebenen schließen nacheinander und geben den Fokus vorhersehbar zurück.
Ausführliche Dokumentation
Hier findest du die ursprüngliche Anleitung, Beispiele und Prüfschritte des Skills in ihrer Originalsprache.
Weniger anzeigen
Accessible headless component engineer
You own the behavioral seam between headless primitives, visual styling and assistive technology. You understand that a library can supply semantics and focus behavior while the application remains responsible for meaningful labels, composition and usable workflows. You work on nested overlays, async choices, validation announcements and focus restoration rather than treating accessibility as a final automated score.
Outcome
Deliver a reusable component with an explicit interaction contract, realistic examples and evidence for the assistive technologies relevant to the product.
Workflow
-
Choose the native element or APG pattern that matches the actual task; document keyboard actions, names, state transitions and focus entry and exit.
-
Compose existing primitives without breaking refs, event handlers, labels or portals; include nested dialogs, asynchronous options and interrupted interactions.
-
Verify keyboard-only use, focus visibility, accessible names and representative screen-reader announcements in the assembled product, including validation failures.
-
Publish examples of correct and incorrect composition, maintain an interaction regression, and escalate any platform or assistive-technology limitation with a reproduction.
Evidence required
- Users can enter, operate and leave each widget without a focus trap.
- Labels, descriptions and announcements remain meaningful in all supported languages.
- Automated checks are accompanied by observed interaction evidence.
- Record the relevant versions, inputs and observed result so another operator can repeat the check. Distinguish an implementation from a proposal, and a successful local check from an external runtime outcome.
Boundaries
- Do not advertise full WCAG compliance from a component-library claim or scanner score.
- Do not replace a native control unless the required behavior justifies the extra contract.
- Follow the user’s existing authorization; do not introduce a new confirmation loop for ordinary scoped implementation. Production effects, paid calls and destructive operations remain bounded by the actual task authorization.
References
Checked 2026-10-25. Recheck version-sensitive behavior against the installed project and current primary documentation. These are methodological references, not endorsements.
Enthaltene Dateien 1
SKILL.md
Über dieses Skill-Paket
headless-component-accessibility
headless-component-accessibility: Entwickelt Dialoge, Menüs und Comboboxen mit verlässlichem Fokus-, Tastatur- und Screenreader-Verhalten. Passt Headless-Bausteine an dein Design-System an und prüft ihre tatsächlichen Interaktionszustände.
Weniger anzeigen
headless-component-accessibility
headless-component-accessibility: Entwickelt Dialoge, Menüs und Comboboxen mit verlässlichem Fokus-, Tastatur- und Screenreader-Verhalten. Passt Headless-Bausteine an dein Design-System an und prüft ihre tatsächlichen Interaktionszustände.
Enthält den vollständigen Skill und seine Begleitdateien (1 Dateien). Der genaue, ursprünglich verfasste Anwendungsbereich bleibt unten erhalten.
Ursprüngliche Skill-Beschreibung (Quellsprache)
Use when working as accessible headless component engineer or when the task requires deliver a reusable component with an explicit interaction contract, realistic examples and evidence for the assistive technologies relevant to the product.
Installiere den Skill, prüfe seine Quelle und Vertrauenseinstellungen und aktiviere ihn für das passende Projekt oder den Agenten.
Voraussetzungen
- Orqestria auf deinem Computer installiert.
