Visual Example
...
Acceptance Criteria
Radio buttons should be used when only one option from a group can be selectedGroups of form controls (such as a list of checkboxes, list of radio buttons, group of input fields) sometimes require a higher-level label. This information can be associated to the group of form controls using <fieldset>
and <legend>
. The <fieldset>
defines the group and the <legend>
contains the description. Screen readers announce the <legend>
when users navigate into the group.
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 TAB key on the keyboard to navigate between form controls
be able to use the Shift + Tab keys on the keyboard to navigate backward
As a screen reader user I should:
be able to explicitly associate
...
the form 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 form label has keyboard focus:
the screen reader should announce the form label
...
Markup and Code
Code Block | ||
---|---|---|
| ||
<fieldset> <legend>Choose a shipping method:<<legend>Billing Address</legend> <input<label idfor="overnightaddress">Address</label> <input typeid="radioaddress" name="shipping" valuerequired type="overnighttext"> <label for="overnightcity">Overnight<>City</label><br>label> <input id="twodaycity" required type="radio" name="shipping" value="twoday"text"> <label for="twodaystate">Two day<>State</label><br>label> <input<select id="groundstate" type="radio"required name="shippingselect"> <option value="ground">1">Alabama</option> </select> <label for="groundzip">Ground<>Zip Code</label> <input id="zip" required type="text"> </fieldset> |