← Back to the catalog

Skill · Version 1.0.0

Accessible headless components

Checks that composed unstyled primitives retain their keyboard, naming and focus behavior in the actual product.

headless-component-accessibility

See how it helps

When is it useful?

Use when assembling dialogs, selectors or menus from a component library.

What does it help you do?

  • Chooses the appropriate native element or accessible interaction pattern.
  • Preserves references, labels and event handlers across composition.
  • Tests nested overlays, async options and screen-reader announcements.

Try asking this

Review our nested dialog and searchable selector using only keyboard navigation, including validation errors. Open the selector inside the dialog, choose an asynchronous result and press Escape. Each overlay should close in order and restore focus predictably.

Detailed documentation

Read the skill’s original instructions, examples and checks in their authored language.

Details…Show less

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

  1. Choose the native element or APG pattern that matches the actual task; document keyboard actions, names, state transitions and focus entry and exit.

  2. Compose existing primitives without breaking refs, event handlers, labels or portals; include nested dialogs, asynchronous options and interrupted interactions.

  3. Verify keyboard-only use, focus visibility, accessible names and representative screen-reader announcements in the assembled product, including validation failures.

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

Included files 1

  • SKILL.md

About this skill package

headless-component-accessibility

headless-component-accessibility: Builds dialogs, menus and comboboxes with dependable focus, keyboard and screen-reader behavior. Adapts headless primitives to your design system and verifies their real interaction states.

Details…Show less

headless-component-accessibility

headless-component-accessibility: Builds dialogs, menus and comboboxes with dependable focus, keyboard and screen-reader behavior. Adapts headless primitives to your design system and verifies their real interaction states.

Includes the complete skill and its supporting files (1 files). The exact authored scope is preserved below.

Original skill description (source language)

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.

Install the skill, review its source and trust settings, then enable it for the relevant project or agent.

Requirements

  • Orqestria installed on your computer.