Why is this an issue?

The HTML specification requires the <legend> element to be a direct child of a <fieldset> or <optgroup> element. Wrapping <legend> inside an intermediate container such as <div> or <span> violates this requirement.

Screen readers and assistive technologies rely on this structure to associate the <legend> caption with the form controls grouped by the <fieldset>. When <legend> is wrapped in another element, most assistive technologies cannot read the legend to users, making the form group inaccessible.

How to fix it

Move the <legend> element so that it is a direct child of its enclosing <fieldset> or <optgroup> element.

Code examples

Noncompliant code example

<fieldset>
  <div>
    <legend>Personal information</legend> <!-- Noncompliant: legend is wrapped in a div -->
  </div>
  <label for="name">Name:</label>
  <input id="name" type="text" />
</fieldset>

Compliant solution

<fieldset>
  <legend>Personal information</legend>
  <label for="name">Name:</label>
  <input id="name" type="text" />
</fieldset>

Resources

Documentation

Standards