missing-fieldset

Ensures that elements in an HTML form are semantically grouped with a <fieldset>

Description

A <fieldset> is used to group semantically common elements. It also helps in organizing the elements visually. Without <fieldset>, how a group of controls are related becomes unclear to users. The missing-fieldset rule ensures that groups of radio buttons and checkboxes have a common <fieldset>.

Why is it important?

Without a <fieldset>, it gets difficult to understand how a group of radio buttons and checkboxes relate to each other. Also, for users who rely on assistive technologies like screen readers, it is difficult to understand their organization.

Example

Consider an HTML form that has a group of checkboxes labeled “Preferences” and a group of radio buttons labeled “Choose Your Subscription”.

This HTML code snippet violates the missing-fieldset rule.

Here’s the corrected code:

In the corrected code, notice the <legend> element. It describes the purpose of the fieldset. If you do not add the <legend> element, you violate the fieldset-missing-legend rule.

How to fix?

Nest the related group of checkboxes and radio buttons under the <fieldset> element.

References

• fieldset-missing-legend
• H71: Groups of form controls using fieldset and legend