Role and semantics
Section titled “Role and semantics”Each card holds a circle with role="radio". The radio is named by the title alone (aria-labelledby); the description and meta are read through aria-describedby. That way screen readers do not read the whole card as the name. The whole card is a label, so it is clickable everywhere. The group carries a fieldset and legend through RadioGroup.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Tab | Enters the group on the selected or first card. |
| Arrows | Select the previous or next card, skipping disabled cards. |
| Space | Selects the focused card. |
Focus is on the radio, but the ring is drawn around the card (has-focus-visible), so it is clear which card has focus.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| Selected card | “Daily digest, radio button, checked, 2 of 3, One email every morning. Recommended” |
| Disabled | “Off, radio button, dimmed” |
Contrast
Section titled “Contrast”Borders have 3:1 against the background, text 4.5:1. The selected card is set apart by a thick border and a filled circle, not colour alone.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How RadioCard meets it | What product teams must do |
|---|---|---|
| 1.3.1 Info and relationships | Fieldset, legend, and separate name and description. | — |
| 1.4.1 Use of colour | Selection also shows as a filled circle and thick border. | — |
| 2.4.7 Focus visible | The ring is around the card. | — |
| 2.5.8 Target size (minimum) | The whole card is clickable. | — |