Using FIELDSET and LEGEND Tags to Improve Accessibility

Donald F. Evans

August 31, 2006

Question

I have several form fields on the page with the same labels. As an example, I have billing information and shipping information all on the same page. The visual user can determine which one they are filling out by the position of the input field and its label. Even though there are two first name fields, one is located in an area with a heading "Shipping Information", and the other in an area with a heading "Billing Information". But the Screen Reader user only hears the label "First Name". How can we distinguish between the two.

Answer

The FIELDSET tag is used to group form fields together. And if a LEGEND tag would be used to wrap around the headings, "Shipping Information" and "Billing Information", then Jaws will append the LEGEND text and the LABEL text together to read them both. So, Jaws would read "Shipping Information Last Name Edit" and "Billing Information Last Name Edit".

Example

Carrier

 
    • <style>
.myFloat {float:left;}
.myList {list-style:none;} 
.myHtag {font-size:100%;display:inline;}
.myFieldSet {border:none;}
</style>
</head>
<body>
<form>
<fieldset class="myFieldSet">
<span>
<h2 class="myHtag"><legend>Carrier</legend></h2>
</span>
<span>
<li class="myList">
<input id="DeviceFinder_cbCarriersAll" type="checkbox" name="DeviceFinder:cbCarriersAll" />
<label for="DeviceFinder_cbCarriersAll">Select All</label>
</span>
<hr>
<span class="myFloat">
<li class="myList">
<input id="DeviceFinder_cblCarriers_0" type="checkbox" name="DeviceFinder:cblCarriers:0" />
<label for="DeviceFinder_cblCarriers_0">Nextel</label>

<li class="myList">
<input id="DeviceFinder_cblCarriers_1" type="checkbox" name="DeviceFinder:cblCarriers:1" />
<label for="DeviceFinder_cblCarriers_1">Verizon Wireless</label>

<li class="myList">
<input id="DeviceFinder_cblCarriers_2" type="checkbox" name="DeviceFinder:cblCarriers:2" />
<label for="DeviceFinder_cblCarriers_2">T-Mobile</label>
</span>

<span class="myFloat">

<li class="myList">
<input id="DeviceFinder_cblCarriers_3" type="checkbox" name="DeviceFinder:cblCarriers:3" />
<label for="DeviceFinder_cblCarriers_3">Cingular Wireless</label>

<li class="myList">
<input id="DeviceFinder_cblCarriers_4" type="checkbox" name="DeviceFinder:cblCarriers:4" />
<label for="DeviceFinder_cblCarriers_4">Sprint PCS</label>

<li class="myList">
<input id="DeviceFinder_cblCarriers_5" type="checkbox" name="DeviceFinder:cblCarriers:5" />
<label for="DeviceFinder_cblCarriers_5">Liberty Wireless</label>
</span>

</fieldset>
</form>

    Other Resources