html - 带有用于选择每一行的复选框的 HTML 表格是否应该包含在带有图例元素的字段集中？

Question

Fieldset 和 legend 元素用于对相关的表单控件进行分组。这很容易理解并适用于“常规”表格，例如“您的详细信息”字段集，其中包含名字、姓氏等文本输入字段。

但是，在对所选行执行批量操作之前，用户是否应该在应用程序的列表页面上使用字段集和图例元素？在该页面上，用户可以选择带有关联复选框的表格行？

例如:

<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声明“分组控件对于相关的单选按钮和复选框最重要。当一组单选按钮或复选框都为单个命名字段提交值时，它们是相关的。”

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

Answer 1

最简单的解决方案是用不同的名称命名每个复选框，例如使用数组(例如，在 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