Web accessibility tutorials Guidance on how to create websites that meet WCAG
Jump to the navigation

Groups of Fields

Status: This is not ready for detailed review. It is an in-progress, unapproved editor’s draft.

Entering a piece of more complex information sometimes requires using multiple form fields. Additionally longer forms should be grouped into groups of logically related form controls to help orientation, using <fieldset> and <legend> elements.

Using fieldsets

The fieldset element is needed to establish relationships between groups of form fields. They help users to focus on the particular topic at hand.

Depending on browser and assistive technology the legend is read out with every form element, once, or not at all. This means that the content of the legend and the labels of individual field sets is very important:

  • The legend should be short as a long legend is very tedious if it is read with every label.
  • The individual labels should be as self-explanatory as possible.
Example
I want to receive

Code snippet: 
<fieldset>
<legend>I want to receive</legend>
  <div>
    <input type="checkbox" name="newsletter" id="check_1"> <label for="check_1">The weekly newsletter</label>
  </div>
  <div>
    <input type="checkbox" name="company_offers" id="check_2"> <label for="check_2">Offers from the company</label> <br>
  </div>
  <div>
    <input type="checkbox" name="assoc_offers" id="check_3"> <label for="check_3">Offers from associated companies</label>
  </div>
</fieldset>

Using multiple (hidden) labels

Using multiple lables introduces some flexibility to the layout of field groups and are appropriate for small amounts of clearly related fields.

Example
Code snippet: 
<form method="post" action="#">
  <div>
    
    <label for="day">Date of birth: </label> 

    <label for="day" class="visuallyhidden">Day</label> 
    <input type="text" id="day" maxlength="2" placeholder="01">
    
    <label for="month" class="visuallyhidden">Month: </label> 
    <select name="month" id="month">
      <option value="01">January</option>
      <option value="02">Febuary</option>
      […]
    </select>

    <label for="year" class="visuallyhidden">Year: </label> 
    <input type="text" id="year" maxlength="4" placeholder="1970">

  </div>
</form>

Success Criteria:

Techniques: