Universal Design for Web Applications

fieldset and legend

Another underutilized HTML feature is fieldset, which is designed to group form controls together. With fieldset and its complementary legend element, you can wrap these fields both visually and in a structure that improves their appearance on both mobile devices and screen readers.

For example, say you want to organize billing addresses and shipping addresses separately. Here’s the actual code, using similar CSS as that we’ll discuss in the upcoming Tab Order” section:

<fieldset>
  <legend>Billing Address</legend>
  <div id="column1">
	<label for="billstreet">Street</label> <br/>
	<label for="billcity">City</label> <br/>
	<label for="billprovince">Province</label> <br/>
	<label for="billpostalcode">Postal Code</label> 
  </div>
  <div id="column2">
    <input type="text" name="billstreet" id="billstreet"><br/>
    <input type="text" name="billcity" id="billcity"/><br/>
    <input type="text" name="billprovince" id="billprovince"><br/>
    <input type="text" name="billpostalcode" id="billpostalcode">
  </div>
</fieldset>

Figure 5-1 shows what that code looks in Firefox.

Figure 5-1. Screenshot of fieldset and legend elements example

Screen readers use this information as well. JAWS, for example, will read the legend before each field contained in the fieldset (“billing address street, billing address city, billing address province…”), providing users with enough information to know ...