Radio Button
Back to simple components
Radio buttons are a group of selections where one selection must be chosen at all times, even by default. One selection is always made to see if focus is indicated. Each radio button must have an associated label, and be screen reader accessible.
WHEN I click on a radio button input label.
THEN My cursor is inside the input field and it is focused.
WHEN I am navigating using a keyboard.
AND I tab on a radio button input.
THEN I see a visual indicator.
AND The focus indicator passes WCAG rule.
WHEN I am navigating using a keyboard.
AND I tab on a radio button input.
AND I am using a screen reader
THEN The screen reader reads out a label for the radio button.
,
THEN My cursor is inside the input field and it is focused.
WHEN I am navigating using a keyboard.
AND I tab on a radio button input.
THEN I see a visual indicator.
AND The focus indicator passes WCAG rule.
WHEN I am navigating using a keyboard.
AND I tab on a radio button input.
AND I am using a screen reader
THEN The screen reader reads out a label for the radio button.
,
More Information
Radio button inputs MUST have an associated label and be part of a radio group, placeholder text is not enough. More information is below