Group of Form Elements

Visual Example

Acceptance Criteria

Groups 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

When the form label has keyboard focus: 

  •  the screen reader should announce the form label

Markup and Code

<fieldset> <legend>Billing Address</legend> <label for="address">Address</label> <input id="address" required type="text"> <label for="city">City</label> <input id="city" required type="text"> <label for="state">State</label> <select id="state" required name="select"> <option value="1">Alabama</option> </select> <label for="zip">Zip Code</label> <input id="zip" required type="text"> </fieldset>

View HTML markup on github