Visual Example
Acceptance Criteria
Radio buttons should be used when only one option from a group can be selected.
As a screen reader user I should be provided with a form label for every form control.
As a screen reader user I should be able to explicitly associate text labels with their respective form control.
As a screen reader user I should be provided with a <fieldset> that groups multiple form control options.
As a screen reader user I should 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.
As a screen reader and keyboard only user I should be able to use the TAB key on the keyboard to move to the next form element.
Markup and Code
| Code Block | ||
|---|---|---|
| ||
<fieldset> <legend>Choose a shipping method:</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> |