Radio

What component has

Keyboard support
Key	Function
`Tab`	Moves focus to the checked `radio` button in the `radiogroup`. If a `radio` button isn’t checked, focus moves to the first `radio` button in the group.
`Shift + Tab`	Moves focus to the previous focusable element.
`Space`	If the `radio` button with focus isn’t checked, changes the state to `checked`. Otherwise, does nothing. Note: The state where a radio isn’t checked only occurs on page load.
`Up Arrow`, `Down Arrow`, `Left Arrow`, `Right Arrow`	Moves focus to and checks the next/previous radio button in the group. If focus is on the last/first radio button, moves focus to the first/last radio button respectively. The state of the previously checked radio button is changed to unchecked.

The list below describes roles and attributes that component already has.

Roles and attributes
Role	Attribute	Element	Usage
`radio`		`div`	Identifies the `div` element as an ARIA `radio` button. The accessible name is computed from the child text content of the `div` element.
	`tabIndex="0"`	`div`	Makes the radio button focusable and includes it in the page `Tab` sequence. Set on only one radio in the radio group. On page load, is set on the first radio button in the radio group. Moves with focus inside the radio group so the most recently focused radio button is included in the page `Tab` sequence. This approach to managing focus is described in the section on roving tabindex.

The <fieldset> surrounds the entire grouping of checkboxes or radio buttons. The <legend> provides a description for the grouping.
Some assistive technology reads the legend text for each fieldset, so it should be brief and descriptive. This helps someone using assistive technology to understand the question they are answering with the group of radio buttons.

Find live examples in the A11y style guide.

The list below will help you to keep in mind the necessary roles and attributes to make our components fully accessible in your interfaces.

Roles and attributes
Role	Attribute	Element	Usage
`radiogroup`		`div`	Identifies the `div` element as a container for a group of `radio` buttons. Isn’t focusable because focus is managed using a roving tabindex strategy as described below.
	`aria-labelledby="[IDREF]"`	`div`	Refers to the element that contains the label of the radio group.
	`tabindex="-1"`	`div`	Makes the element focusable but not part of the page `Tab` sequence. Applied to all radio buttons contained in the radio group except for one that is included in the page `Tab` sequence. This approach to managing focus is described in the section on roving tabindex.

W3 radio group examples has detailed information about the radio group accessible behavior.
A11y style guide gives core recommendations for the accessible radio buttons.
Find live examples of accessible inputs with different types in DigitalA11y project.

See more accessibility recommendations in the common Accessibility guide.