HTML5 复选框：哪个元素应具有 'aria-describedby' 属性

Question

我目前正在为本地应用程序的搜索页面编写用户界面。此搜索必须具有复选框以限制搜索查询的范围。为了使此功能可访问，我想使用 "wai-aria"-Attributes.

到目前为止，我的标记如下所示：

<div class="input-group">
  <div class="checkbox-inline">
    <input type="checkbox" id="check-bd-1">
    <label for="check-bd-1">Band 1</label>
  </div>

  <div class="checkbox-inline">
    <input type="checkbox" id="check-bd-2"></input>
    <label for="check-bd-2">Band 2</label>
  </div>

  (... and so on...)

  <p id="help-check-band" class="form-control-static">Helptext...</p>
</div>

我想使用 "aria-describedby" 属性来引用由 "help-check-band" 标识的帮助文本。此文本适用于该组的每个输入。

我的问题是：我应该把 "aria-describedby"-属性放在哪里？是否有必要将它放在每个 <input> 元素上，或者将它放在最顶层的 div 中是否足够（使用 class "input-group"）？

Answer 1

根据The Mozilla Dev-Network，这两种方式似乎都是可行的。 "aria-describedby" 可以被容器和输入元素使用。由于 input-Element 上的属性直接对应于功能，因此这种方式似乎适合这种情况。

HTML5 复选框：哪个元素应具有 'aria-describedby' 属性

HTML5 Checkboxes: Which element should have the 'aria-describedby'-attribute

html

wai-aria

twitter-bootstrap