Prepared Docs

Prepared Docs

⌘K

    Loading navigation…

User

  1. Components
  3. Radio Cards
  5. Accessibility

Radio cards

Accessibility

RadioCardGroup from @prepared911/ui-core is Radix RadioCards with built-in group semantics, roving focus, and selection. Your job is to label the group, ensure selection state is non-visual, and keep hidden-indicator modes accessible.

What the component handles

  • Group semantics. Container exposes a group role; cards expose role="radio" with aria-checked.
  • Arrow-key navigation. Arrow Up/Down/Left/Right move selection between cards.
  • Read-only mapping. readOnly applies aria-readonly on the root.

What you must provide

  • Group label. Pair the group with a caption or heading referenced via aria-labelledby.
  • Non-color selection signaling. When showIndicator={false}, ensure the selected card is distinguishable beyond color—border weight, elevated surface, or a filled chevron.
  • Read-only explanations. Pair a read-only group with copy explaining why the selection can't change.

Keyboard behavior

  • Tab moves focus into the group (lands on the selected card or first card).
  • Arrow keys move selection between cards.
  • Enter / Space activate the focused card.

Semantics and roles

  • Group container exposes a grouping role with aria-labelledby or aria-label.
  • Each card renders as role="radio" with aria-checked reflecting selection.

Known caveats

  • Description text. Descriptions inside a card should associate with the option via aria-describedby so screen readers announce them as part of the selection.
  • Pricing or dense metadata. Long numerical content inside cards (prices, tiers) should be announced clearly; consider concise aria-label for the card when the visual emphasizes numbers that read poorly in speech.

Previous

Radio Cards / API and Development

Next

Secret / Usage

On this page

What the component handles
What you must provide
Keyboard behavior
Semantics and roles
Known caveats