Intelligence Community Design System

When interacting with a radio button on a keyboard, the tab key moves the focus to the radio group. Once focus is on the radio group, the arrow keys move between the radio options. When tabbing to a radio group with an option already selected, the focus is applied to the selected option. Moving through the other radio options using the arrow keys automatically selects the focused option.

When tabbing to a radio group with no option selected, the focus is applied to the first option in the group without selecting the option. The unselected radio button can be selected using the space key when the radio button is focused.

When conditional fields are displayed beneath radio buttons, the conditional field acts as the child of the radio button. When the field is dynamically displayed after selecting a radio button, then it should be announced by the screen reader as required based on the user’s current selection. Tabbing on from the radio group should move focus to the dynamically displayed field, and then onwards through the rest of the tab index.

A container of radio buttons uses the aria roleradiogroup , with each individual radio identified asradio , and uses thearia-checked property to denote selection.

Radio buttons always use a label to ensure that their visible text label is announced alongside the radio button.

The radio component has been based on the following resources:

We’ve tested this component against WCAG 2.2 Level AA. It’s been tested with NVDA and VoiceOver, and several different users with different interaction methods.