SiteLint documentation and guidelines

Fieldset no legend

Description

The <fieldset> element is used in HTML to group related form controls and labels within a web form. The <legend> element, which should be the first child of the <fieldset>, provides a caption for the group, giving context and meaning to the grouped controls. Omitting the <legend> element can lead to confusion and accessibility issues, particularly for users relying on screen readers and other assistive technologies.

Disabilities impacted

  • Visual impairments: users with visual impairments who rely on screen readers need the <legend> to understand the context and purpose of the grouped form controls.
  • Cognitive disabilities: users with cognitive disabilities benefit from clear and descriptive legends that help them understand the organization and purpose of the form controls.
  • Motor impairments: users with motor impairments who navigate forms using keyboards or other assistive devices rely on well-structured and clearly labeled form elements to interact efficiently.

Why it matters

Using a <legend> element with a <fieldset> ensures that all users, particularly those using assistive technologies, can understand the context and purpose of the grouped form controls. This practice enhances the accessibility and usability of forms, providing a better experience for all users.

Coding problems and solutions

Common coding problems

  • Missing <legend> element: the <fieldset> element is used without a <legend>, making it difficult for users to understand the context of the grouped controls.
  • Non-descriptive legends: the <legend> is present but does not provide enough information about the purpose of the grouped controls.
  • Improper placement of <legend>: the <legend> element is not the first child of the <fieldset>, which can confuse assistive technologies.

How to fix it

Include a <legend> element

Ensure that every <fieldset> includes a <legend> element to provide context for the grouped controls.

Incorrect example
<fieldset>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
</fieldset>
Correct example
<fieldset>
    <legend>Personal Information</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
</fieldset>

Provide descriptive legends

Use descriptive text in the <legend> to clearly indicate the purpose of the grouped controls.

Incorrect example
<fieldset>
    <legend>Details</legend>
    <label for="phone">Phone Number:</label>
    <input type="tel" id="phone" name="phone">
    <label for="address">Address:</label>
    <input type="text" id="address" name="address">
</fieldset>
Correct example
<fieldset>
    <legend>Contact Details</legend>
    <label for="phone">Phone Number:</label>
    <input type="tel" id="phone" name="phone">
    <label for="address">Address:</label>
    <input type="text" id="address" name="address">
</fieldset>

Place <legend> as the first child

Ensure that the <legend> element is the first child of the <fieldset> for proper accessibility.

Incorrect example
<fieldset>
    <label for="address">Address:</label>
    <input type="text" id="address" name="address">
    <legend>Shipping Information</legend>
    <label for="city">City:</label>
    <input type="text" id="city" name="city">
</fieldset>
Correct example
<fieldset>
    <legend>Shipping Information</legend>
    <label for="address">Address:</label>
    <input type="text" id="address" name="address">
    <label for="city">City:</label>
    <input type="text" id="city" name="city">
</fieldset>

Known limitations

  • Complex forms: for complex forms with multiple <fieldset> related form controls, ensure each has a descriptive <legend> to maintain clarity.
  • Dynamic content: when adding dynamic form fields, ensure that legends are dynamically generated and associated correctly.
  • Testing across devices: test forms across different devices and screen readers to ensure that legends are properly associated and accessible.

Resources