Radio Inputs

Success Criteria:

Description Label describes its purpose
Role Identifies as a radio button
Relationships for="input-id" is required in the label
State checked/unchecked (selected/unselected), disabled
Focus Visibly focusable with tab key / swipe
Action Select with spacebar / double tap and arrow keys

Keyboard & Screenreader Support

Tab / swipe Moves focus to the checked radio input in the group. If a radio button is not checked, focus moves to the first radio button in the group.
Space / double tap If the radio button with focus is not checked, changes the state to checked. Otherwise, does nothing. Note: The state where a radio is not checked only occurs on page load.
Right arrow / swipe Moves focus to and checks the next radio button in the group. If focus is on the last radio button, moves focus to the first radio button. The state of the previously checked radio button is changed to unchecked.
Down arrow / swipe Moves focus to and checks the next radio button in the group. If focus is on the last radio button, moves focus to the first radio button. The state of the previously checked radio button is changed to unchecked.
Left arrow / swipe Moves focus to and checks the previous radio button in the group. If focus is on the first radio button, moves focus to and checks the last radio button. The state of the previously checked radio button is changed to unchecked.
Up arrow / swipe Moves focus to and checks the previous radio button in the group. If focus is on the first radio button, moves focus to and checks the last radio button. The state of the previously checked radio button is changed to unchecked.

Native Element

Native radio inputs have a lot of of keyboard and focus interactions built in for free.

Description

  • Label inner text should describe the radio input.
  • aria-describedby="description-id" for additional descriptions

Role

  • Is natively a radio button

Relationships

  • <fieldset> should wrap the radio group
  • <legend> should describe the group
  • for="input-id" connects the input to its label

State

  • checked/unchecked (will be read as "selected" by screen reader)

Focus

  • Is natively focusable
  • Focus must be visible

Actions

  • Tab / swipe
  • Space / double tap
  • Arrow Keys / swipe

Custom Element

Avoid building custom radio inputs; there is probably no reason a native radio cannot be styled as desired.

Description

  • Label inner text should describe the radio input.
  • aria-label="input description" can also be used.

Role Requires extra work

  • role="radio" for the radio element
  • role="radiogroup" for the container element

Relationships Requires extra work

  • aria-labelledby="label-id"

State Requires extra work

  • aria-checked="true/false"

Focus Requires extra work

  • Roving tabindex="-1" and tabindex="0"

Actions Requires extra work

  • Tab / swipe
  • Space / double tap
  • Arrow Keys / swipe