Grouping controls

Group related form controls to make it easier for all users to understand the form. Screen readers announce the start and end of the group and the group’s label as one navigates in and out of groups. Grouping controls is especially important for related radio buttons and checkboxes, as individual labels may not fully convey the group’s topic.

Follow these best practices for labeling controls:

  • Use a <fieldset> element to group related controls in a form.
  • Use the <legend> element to name the <fieldset> element.
  • Make the <legend> as short as possible, as some screen readers declare the <legend> together with each label.
  • Make the individual labels self-explanatory as some assistive technology does not declare the <legend>. Do not repeat the <legend> in any label.
  • Use ARIA role="group" and aria-labelledby to group and label related form elements when you can't use native HTML <fieldset> and <legend> elements.
  • Use <label> wherever possible for universal browser and screen reader support.
  • Use <optgroup> element for <select> elements with groups of options

  Good example: Group related checkbox controls using fieldset and legend

Choose your availability (check all that apply):

HTML

<fieldset class="chkbxrdio-grp">
   <legend>
      <span class="field-name">   
         Choose your availability (check all that apply):
      </span>
   </legend>
   <div class="checkbox">
      <label for="morning"> 
         <input type="checkbox" id="morning" name="avail" value="a">
         Morning 
      </label>
   </div>
   <div class="checkbox">
      <label for="after"> 
         <input type="checkbox" id="after" name="avail" value="b">
         Afternoon 
      </label>
   </div>
   <div class="checkbox">
      <label for="even"> 
         <input type="checkbox" id="even" name="avail" value="c">
         Evening
      </label>
   </div>
</fieldset>

  Good example: Group related form elements with ARIA

Group related form elements and name them with ARIA when the equivalent, native HTML <fieldset> and <legend> elements cannot be used.

Set the related form fields in a <div> container and assign the container the role="group" attribute. Name the group container with an aria-labelledby attribute pointing to the id attribute value of the element holding the descriptive text.

Contact information

HTML

<p id="grouplabel">
   <strong>Contact information<strong>
</p>
<div role="group" aria-labelledby="grouplabel"> 
   <div class="form-group">
      <label for="name" class="col-sm-4 control-label">Name</label> 
      <div class="col-sm-8">
         <input type="text" id="name" class="form-control"></div>
      </div> 
   <div class="form-group">
      <label for="phone" class="col-sm-4 control-label">Phone</label> 
      <div class="col-sm-8">
         <input type="text" id="phone" class="form-control">
      </div>
   </div> 
  […]
</div>

  Good example: Group related option elements with optgroup

HTML

<label for="cars">Choose a car</label>
<select name="cars" id="cars">
   <optgroup label="American cars">
      <option value="ford">Ford</option>
      <option value="chevrolet">Chevrolet</option>
      <option value="tesla">Tesla</option>
   </optgroup>
   <optgroup label="Japanese cars">
       <option value="honda">Honda</option>
       <option value="toyota">Toyota</option>
   </optgroup>
</select>

Related WCAG resources

Related WCAG resources

Success criteria

Techniques

Back to top