Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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

...

As a screen reader and keyboard only user I should be able to use the up/down ↑/↓ or left/right ←/→ arrows on the keyboard to select an option.

...

When the radio button has keyboard focus: 

  •  the screen reader should announce the form label

...

Markup and Code

Code Block
languagehtml
<fieldset>
<legend>Choose<legend>Select ayour shipping methodoption:</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>

...