1

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.

mjoyce91
  • 316
  • 2
  • 19
  • What do you mean with your need "to have more control over where it is placed"? Ideally the legend element is a direct descendant of the fieldset element. MDN says: "Permitted parents: A `
    ` whose first child is this `` element". https://developer.mozilla.org/en/docs/Web/HTML/Element/legend Also this article helps to shed a light: https://www.paciellogroup.com/blog/2007/11/fieldsets-legends-and-screen-readers/
     – Marco Hengstenberg May 26 '17 at 13:45
  • I had a false assumption that `legend` wasn't a block element by default. And the "permitted parent" reference in the MDN link is what I was looking for. Feel free to add a proper answer and I'll choose it. – mjoyce91 May 26 '17 at 13:56

1 Answers1

2

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.

Community
  • 1
  • 1
aardrian
  • 8,581
  • 30
  • 40