The <fieldset> and <legend> elements
The fieldset element is a convenient way to create groups of widgets that share the same purpose, for styling and semantic purposes. You can label a fieldset by including a legend element just below the opening fieldset tag. The text content of the legend formally describes the purpose of the fieldset it is included inside. Many assistive technologies will use the legend element as if it is a part of the label of each control inside the corresponding fieldset element. For example, some screen readers such as Jaws and NVDA will speak the legend's content before speaking the label of each control.
Here is a little example:
code:
<form>
<fieldset>
<legend>Fruit juice size</legend>
<p>
<input type="radio" name="size" id="size_1" value="small">
<label for="size_1">Small</label>
</p>
<p>
<input type="radio" name="size" id="size_2" value="medium">
<label for="size_2">Medium</label>
</p>
<p>
<input type="radio" name="size" id="size_3" value="large">
<label for="size_3">Large</label>
</p>
</fieldset>
</form>When reading the above form, a screen reader will speak "Fruit juice size small" for the first widget, "Fruit juice size medium" for the second, and "Fruit juice size large" for the third.
The use case in this example is one of the most important. Each time you have a set of radio buttons, you should nest them inside a fieldset element. There are other use cases, and in general the fieldset element can also be used to section a form. Ideally, long forms should be spread across multiple pages, but if a form is getting long and must be on a single page, putting the different related sections inside different fieldsets improves usability.
Because of its influence over assistive technology, the fieldset element is one of the key elements for building accessible forms; however it is your responsibility not to abuse it.
Comments on this article:
GoodThe comments are owned by the poster. We aren't responsible for its content.