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
...
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 | ||
|---|---|---|
| ||
<fieldset> <legend>I<legend>Select enjoyyour theshipping following activitiesoption:</legend> <input id="hikingovernight" type="checkboxradio" name="toppingsshipping" value="hikingovernight"> <label for="hikingovernight">Hiking<>Overnight</label><br> <input id="bikingtwoday" type="checkboxradio" name="toppingsshipping" value="bikingtwoday"> <label for="bikingtwoday">Biking</label><br> <input id="running" type="checkbox" name="toppings" value="running"> <label for="running">Running<>Two day</label><br> <input id="dancingground" type="checkboxradio" name="toppingsshipping" value="dancingground"> <label for="dancingground">Dancing<>Ground</label> </fieldset> |