The `auro-radio` component follows native HTML radio button semantics. This page documents the ARIA attributes, screen reader behavior, and other accessibility features built into the component. For keyboard interaction details, see the Keyboard Behavior page. ARIA Roles and Attributes Radio Group The `` element uses a `

` with a `

` internally, providing native grouping semantics. These attributes are applied to that shadow-DOM `

`, **not** to the `` host element: | Attribute | Value | Description | |---|---|---| | `role` | `radiogroup` | Groups related radio buttons together. Set explicitly on the `

`; a bare `

` would otherwise expose the implicit role `group`. | | `aria-invalid` | `true` | Present only while the group is in an invalid state. The attribute is **omitted entirely** when the group is valid — it is never set to `false`. | | `aria-describedby` | id reference | Points at the `id` of the group's help-text/error element, so assistive technology can associate the message with the group on demand rather than relying only on the one-time live-region announcement. | Radio Each `` renders a native `` inside its shadow DOM: | Attribute | Value | Description | |---|---|---| | `type` | `radio` | Native radio input type. | | `aria-checked` | `true` / `false` | Reflects the selected state of the radio button. | | `aria-disabled` | `true` / `false` | Indicates whether the radio button is disabled. | | `aria-invalid` | `true` | Mirrored onto each radio from the group while the group is invalid, and removed when it becomes valid. Omitted rather than set to `false`. | Why the invalid state appears twice While the group is invalid, `aria-invalid` is set on both the `

` and every individual ``. This is intentional. Some assistive-technology and browser combinations announce a container's invalid state only when focus first enters the group, not on each subsequent arrow-key move between radios; mirroring the state onto each radio keeps it conveyed throughout. As a side effect, VoiceOver may say "invalid data" twice in a single utterance when you Tab into an invalid group. The group-level placement is unambiguous: `aria-invalid` is a global attribute in ARIA 1.1, and although ARIA 1.2 deprecates that global use in favor of a supported-role list, `radiogroup` is on that list — so the `

` is spec-clean under either version. The **per-radio** placement rests on the looser footing: `radio` is *not* on the ARIA 1.2 supported-role list, so it depends on the same deprecated-global allowance that the [Checkbox accessibility page](../../checkbox/demo/accessibility.html) documents for its `group` fieldset. It is not a *prohibited* attribute for `radio`, current axe-core resolves it as global and reports no violation, and the per-radio redundancy is what keeps the invalid state conveyed while arrowing through options — so it is kept deliberately. An automated axe assertion in the component's test suite pins this outcome, so a change in tooling surfaces there rather than in a consumer's audit. Attribute placement `aria-invalid` is applied to the internal `

`, which is the element that carries `role="radiogroup"` — ARIA state has to live on the same element as the role it describes. It is **not** set on the `` host element. Do not write CSS selectors or test assertions against `auro-radio-group[aria-invalid]`; query the `part="radio-group"` fieldset or read the `validity` property instead. Screen Reader Announcements - **Focus** — When focus moves to a radio button, the screen reader announces the radio label, its selected/unselected state, its position in the group (e.g. "1 of 3"), and role ("radio button"). - **State change** — Selecting a radio button announces the new state ("selected"). - **Group context** — The legend text provides group context when navigating between groups. - **Error** — When validation fails, the error message is announced immediately via the help text's `role="alert"` live region, and stays discoverable afterward through the group's `aria-describedby` association. - **Invalid state** — While the group is invalid, entering it or moving between its radios conveys the invalid state. Accessible Labels - The `legend` slot content provides the accessible group label via the native `

` element. - Each radio button's `label` attribute provides its individual accessible label. - A label is required for each radio button. Without it, assistive technology users will not have context for what the radio controls. - The `(optional)` label is automatically appended when the `required` attribute is not set. Form Participation The `` participates in form validation and submission. When used inside a `

` or ``, the selected radio button's value is included in the form data.