div 内的 Fieldset 图例 pa11y WCAG 2.0 失败

Question

我有一个如下所示的字段集：

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

我在 div 中添加了图例，以便更好地控制图例的放置位置。但是，当它在 div 内部时，它无法通过 pa11y WCAG 2.0 AA 测试，并返回以下错误：

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

当我从 div 中删除它时，错误消失了：

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

这是误报吗？还是 div 中的图例实际上会使某些用户无法访问它？

编辑：将我的 div class input-left 应用于 legend 元素可以满足我的需要。但是，我仍然想知道合规性级别需要什么。

Answer 1

如果您依赖 HTML 5.1（假设是这样，尽管您的代码中没有 DTD），那么 <legend> 必须是 <fieldset> 的第一个 child：

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

如果您将代码放入 HTML validator，那么它会 return 一个错误：

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.