Search code examples
htmlcsssection508wcag2.0pa11y

Fieldset's legend inside of a div fails pa11y WCAG 2.0

I have a fieldset like the following:

<fieldset>
 <div class="input-left">
  <legend class="legend-filters">Your full name:</legend>
 </div>
 <div class="input-right">
  <!-- some input here ... -->
 </div>
</fieldset>

I have the legend inside of a div to have more control over where it is placed. However, when it is inside of a div, it fails the pa11y WCAG 2.0 AA test, and the following error is returned:

Fieldset does not contain a legend element. All fieldsets should contain a legend element that describes a description of the field group.

When I remove it from a div, the error goes away:

<fieldset>
 <legend class="legend-filters">Your full name:</legend>
 <div class="input-right">
  <!-- some input here ... -->
 </div>
</fieldset>

Is this a false positive? Or does having the legend in a div actually make it inaccessible to some users?

Edit: applying my div class input-left to the legend element does what I need. However, I would still like to know at a compliance level what is required.

Solution

  • If you are leaning on HTML 5.1 (assuming so, though no DTD in your code), then <legend> must be the first child of <fieldset>:

    Contexts in which this element can be used:

    As the first child of a <fieldset> element.

    — https://www.w3.org/TR/html51/sec-forms.html#the-legend-element

    If you drop your code into the HTML validator, then it will return an error:

    Error: Element legend not allowed as child of element div in this context. (Suppressing further errors from this subtree.)

    From line 9, column 7; to line 9, column 37

    t">↩ <legend class="legend-filters">Your f

    Contexts in which element legend may be used:

    As the first child of a fieldset element.