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 in an HTML form. It also helps in organizing the elements visually. Without <fieldset>, how a group of controls are related becomes unclear to users.

Why is it important?

Though form controls render even without a <fieldset>, it gets difficult to make out which controls relate to each other. Also, for users who rely on assistive technologies like screen readers, it is difficult to understand their organization.
If the related form controls are clearly labeled and described, you can ignore this.

Example

Consider an HTM form that accepts name, email ID, and phone number as inputs:

This HTML code snippet violates the missing-fieldset rule. Here’s the complete 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, radio buttons, or records under the <fieldset> element.

References

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