一个 HTML table 带有复选框到 select 每行的 HTML table 是否应该包含在带有图例元素的字段集中？

Question

Fieldset 和 legend 元素用于对相关的表单控件进行分组。这很容易理解和申请 "regular" 表格，例如"Your Details" 带有名字、姓氏等文本输入字段的字段集

但是，在对 select编辑行数？

例如：

<form>
  <fieldset>
    <legend>Users</legend>
    <table>
      <thead>
        <tr>
          <th></th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="checkbox" name="SelectedItem" value="Anna" /></td>
          <td>Anna</td>
        </tr>
        <tr>
          <td><input type="checkbox" name="SelectedItem" value="Chris" /></td>
          <td>Chris</td>
        </tr>
      </tbody>
    </table>
    <label for="ListAction">Bulk action</label>
    <select id="ListAction" name="ListAction">
      <option value="Nothing" selected="selected">Select action</option>
      <option value="Delete">Delete</option>
      <option value="Suspend">Suspend</option>
    </select>
    <input type="submit" value="Go" name="BulkActionGo" />
  </fieldset>
</form>

https://www.w3.org/TR/WCAG20-TECHS/H71.html 表示 "Grouping controls is most important for related radio buttons and checkboxes. A set of radio buttons or checkboxes is related when they all submit values for a single named field."

上面的例子就是这种情况，但是 fieldset/legend 似乎仍然不适合这个用例，它可能包含大量表格数据 - 和不相关的分页控件 - 而不是一组简单的表单控件。

Answer 1

不，没有理由将其包含在字段集中。如果要应用样式元素或在 JavaScript 中引用它，可以将其放在 div 中，但字段集在这种情况下没有任何实际应用。

Answer 2

最简单的解决方案是用不同的名称命名每个复选框，例如使用数组（例如，在 PHP 中很容易解析）

<tbody>
 <tr>
   <td><input type="checkbox" name="SelItem[0]" value="Anna" title="Select Anna" /></td>
   <td>Anna</td>
 </tr>
 <tr>
   <td><input type="checkbox" name="SelItem[1]" value="Chris" title="Select Chris" /></td>
   <td>Chris</td>
 </tr>

这样，对于辅助技术（以及软件或外部软件中的任何内部算法）来说，您的意图不是创建与组相关的复选框，而是与个人相关的一组复选框。记录.

fieldset在图例给出说明的情况下很有用：

<fieldset>
  <legend>Select your favorite Beatles</legent>
  <label><input type="checkbox" nama="fab4" value="John" />John</label>
  <label><input type="checkbox" nama="fab4" value="Paul" />Paul</label>
  <label><input type="checkbox" nama="fab4" value="George" />George</label>
  <label><input type="checkbox" nama="fab4" value="Ringo" />Ringo</label>
</fieldset>

如果您想指定单个记录的特征，意图不同，复选框名称可能链接到行，而不是列。

<div class="group">
  <div class="member">
    <div class="name">John</div>
    <label><input type="checkbox" name="john[is_singer]" value="1" />Sing</label>
    <label><input type="checkbox" name="john[play_guitar]" value="1" />Play guitar</label>
  </div>
  <div class="member">
    <div class="name">Paul</div>
    <label><input type="checkbox" name="paul[is_singer]" value="1" />Sing</label>
    <label><input type="checkbox" name="paul[play_guitar]" value="1" />Play guitar</label>
  </div>
</div>

这将使辅助技术轻松处理表格，而无需使用任何冗余fieldset

一个 HTML table 带有复选框到 select 每行的 HTML table 是否应该包含在带有图例元素的字段集中？

Should a HTML table with checkboxes to select each row be contained in a fieldset with a legend element?

html

accessibility