Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  3. Radio Cards
  5. Accessibility

Radio cards

Accessibility

RadioCards from @prepared911/ui 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
Range Slider / Usage
On this page
What the component handles
What you must provide
Keyboard behavior
Semantics and roles
Known caveats