Radio Buttons

Visual Example

Acceptance Criteria

Radio buttons should be used when only one option from a group can be selected.

As a screen reader and keyboard only user I should:

be provided with a form label for each form control
be able to use the up/down ↑/↓ or left/right ←/→ arrow keys on the keyboard to navigate between radio buttons
be able to use the up/down ↑/↓ or left/right ←/→ arrow keys on the keyboard to select an option
be able to use the TAB key on the keyboard to move to the next form element

As a screen reader user I should:

be able to explicitly associate the forms labels with their respective form control
be provided with a <fieldset> that groups multiple form control options
be provided with a "legend" that describes the group of form controls

When the radio button has keyboard focus:

the screen reader should announce the form label

Markup and Code

<fieldset>
<legend>Select your shipping option:</legend>
<input id="overnight" type="radio" name="shipping" value="overnight">
<label for="overnight">Overnight</label><br>
<input id="twoday" type="radio" name="shipping" value="twoday">
<label for="twoday">Two day</label><br>
<input id="ground" type="radio" name="shipping" value="ground">
<label for="ground">Ground</label>
</fieldset>

View HTML markup on github

Required Radio Group

<fieldset>
  <legend>Choose a shipping method: <span class="sr-only">required</span><span aria-hidden="true">*</span></legend>

  <input id="overnight" type="radio" name="shipping" value="overnight" required>
  <label for="overnight">Overnight</label><br>

  <input id="twoday" type="radio" name="shipping" value="twoday">
  <label for="twoday">Two day</label><br>

  <input id="ground" type="radio" name="shipping" value="ground">
  <label for="ground">Ground</label>
</fieldset>
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

<span class="sr-only">required</span> — Will only be announced by screen readers.
required on only one radio button (usually the first one) — this is enough for HTML5 validation to treat the entire radio group as required.
aria-hidden="true" on the asterisk * — hides the visual indicator from screen readers to prevent redundancy.
Grouping with <fieldset> and labeling with <legend> ensures screen readers announce the question when focusing on the inputs.