作为 <fieldset> 的直接子代围绕 <legend> 工作

Question

TLDR：看最后一个例子，它没有验证。哈尔普

我正在使用 Bootstrap 3 来布局一个表单，分为 2 列，如下所示：

<div class="form-group row">
  <div class="col-sm-3">
    <label for="c_title">Survey title</label>
  </div>
  <div class="col-sm-9">
    <input name="c_title" id="c_title" >
  </div>
</div>

到目前为止一切顺利。这看起来是对的，也验证了。

然后，稍后在表格中我有行，它是选项的集合...

<div class="form-group row">
  <div class="col-sm-3">Survey options</div>
  <div class="col-sm-6">
    <label><input type="checkbox" name="opt1" >option #1</label>
    <label><input type="checkbox" name="opt2" >option #2</label>
    <label><input type="checkbox" name="opt3" >option #3</label>    
  </div>
</div>

我想我真的应该在那里使用 <fieldset> 和 <legend>，这样才好...

<fieldset class="form-group row">
  <legend class="col-sm-3">Survey options</legend>
  <div class="col-sm-9">
    <label><input type="checkbox" name="opt1" >option #1</label>
    <label><input type="checkbox" name="opt2" >option #2</label>
    <label><input type="checkbox" name="opt3" >option #3</label>    
  </div>
</fieldset>

加上一点 CSS 使其看起来合理，这看起来也是正确的并得到验证。

不过，我还想将一两个额外的元素放入左侧栏中。这些可能是一个小的弹出文本气泡，或一些额外的文本注释约束（例如“（最多 200 个字符）”）。

我认为这些位不属于 <legend> 本身，我的理解是整个 <legend> 都会为字段集中的每个表单控件读出..所以对 a11y 用户来说会很乏味。（顺便说一句，我可能会 link 通过 aria-describedby 将图例添加到跨度文本中）。

所以我这样编码：

<fieldset class="form-group row">
  <div class="col-sm-3">
    <legend>Survey options</legend>
    <span class="muted">(see HR manual page 321)</span>
    <button type="button" id="beta2"></button>
  </div>
  <div class="col-sm-9">
    <label><input type="checkbox" name="opt1" >option #1</label>
    <label><input type="checkbox" name="opt2" >option #2</label>
    <label><input type="checkbox" name="opt3" >option #3</label>    
  </div>
</fieldset>

这在浏览器中看起来仍然正确，但未通过验证。显然，<legend> 必须是 <fieldset>.

的第一个直接子节点

关于我如何处理这个问题有什么建议吗？ html5 规范在这一点上是否过于挑剔？

Answer 1

这可能行得通...

<fieldset class="form-group row">
  <legend class="sr-only">Survey options</legend>
  <div class="col-sm-3">
    <div aria-hidden="true" role="presentation" class="fake-legend">
      Survey options
    </div>
    <span class="muted">(see HR manual page 321)</span>
    <button type="button" id="beta2">?</button>
  </div>
  <div class="col-sm-9">
    <label><input type="checkbox" name="opt1">option #1</label>
    <label><input type="checkbox" name="opt2">option #2</label>
    <label><input type="checkbox" name="opt3">option #3</label>    
  </div>
</fieldset>

在这里，<legend> 现在是字段集的第一个直接子元素（因此它有效），但随后被 Bootstrap 的 [=30= 阻止在屏幕上可见]="sr-only"（因此仍然可以作为屏幕阅读器的实际 <legend> 语义元素使用）。

然后，图例文本在第一列 div 中重复，格式化为看起来像图例 (.fake-legend)，然后通过 [=13 为屏幕阅读器删除=].

aria-hidden is defined as

aria-hidden: Indicates that the element and all of its descendants are not visible or perceivable (i.e.presentable to users in ways they can sense) to any user as implemented by the author. (See related aria-disabled).

Authors MAY, with caution, use aria-hidden to hide visibly rendered content from assistive technologies only if the act of hiding this content is intended to improve the experience for users of assistive technologies by removing redundant or extraneous content. Authors using aria-hidden to hide visible content from screen readers MUST ensure that identical or equivalent meaning and functionality is exposed to assistive technologies.

role="presentation" 定义为

presentation (role): An element whose implicit native role semantics will not be mapped to the accessibility API.

The intended use is when an element is used to change the look of the page but does not have all the functional, interactive, or structural relevance implied by the element type, or may be used to provide for an accessible fallback in older browsers that do not support WAI-ARIA.

作为 <fieldset> 的直接子代围绕 <legend> 工作

Working around <legend> as a direct child of <fieldset>

html

accessibility

fieldset

twitter-bootstrap-3