如何在表格中正确编码/标记表单控件答案

【问题标题】：How to properly code/label form controls within a table如何在表格中正确编码/标记表单控件
【发布时间】：2019-07-24 15:18:37
【问题描述】：

背景：有一张三列五行的表格。第一列是“警报”，第二列是“电子邮件”，第三列是“文本”。每行都有警报说明，在电子邮件和文本列下带有复选框，供用户选择加入或退出接收通知。

问题：复选框是否需要关联标签？表单控件（复选框）没有关联的标签，但与表格相关。前任。用户阅读警报类型，转到第二列以选中/取消选中复选框以选择加入电子邮件警报，第三列与文本警报复选框相同。从屏幕阅读器的角度来看，由于列标题和行的上下文，它仍然可以理解，但是标签对于 WCAG 2.1 AA 可访问性要求是绝对必要的吗？

【问题讨论】：

标签只是标签 - 使用或不使用。对复选框没有影响
谢谢，但我指的是 WCAG 可访问性标准，以及在这种情况下它们是否是必须具备的。特别是 WCAG 标准 1.3.1 信息和关系以及标准 3.3.2 标签或说明。
"Label is just label - either use it or not. Does not have influence on checkbox" - 我绝对不同意。它对复选框有巨大的影响。没有标签的复选框只是一个没有目的的浮动框。标签还增加了目标大小 - 您可以单击框或框的标签。

标签： angular accessibility wcag2.0

【解决方案1】：

回答您的问题：您不必拥有<label>。 WCAG 还有其他实现相同目标的方法，例如使用相邻按钮：https://www.w3.org/WAI/WCAG21/Techniques/general/G167.html

用户应该能够轻松确定复选框的用途，屏幕阅读器应该能够在关注复选框时听到（最好是唯一的）名称/描述。

在我看来，“警报类型”（如果是唯一的）可以用作与复选框关联的标签。无论如何，复选框应该有某种可访问的名称。

【讨论】：

我会将“电子邮件”和“文本”设置为复选框标签，因为此信息比警报类型更难获得；不过，这只是一种方法。
我现在看到复选框被描述为属于电子邮件列和文本列，所以我同意你的建议。
G167 可能满足 3.3.2，因此输入字段具有标签（该 URL 中的示例），但如果该标签不是以编程方式，它仍然会失败 4.1.2与输入相关联。用户会选择输入并不听到“搜索”。

【解决方案2】：

假设警报列中的每个值都是唯一的，您可以为它们分配一个 id 并使用 aria-labelledby 属性将每个复选框元素链接到其警报类型，从而提供所需的以编程方式关联的标签.使用适当的表头标记，屏幕阅读器应该用表头标签和“警报类型”标签来宣布元素，以提供与表视觉提供的相同上下文。据我所知，这应该可以解决任何潜在的 1.3.1、3.3.2 和 4.1.2 故障问题。尝试使用屏幕阅读器运行 sn-p 以浏览未标记和已标记的表以查看差异。

相关片段代码：

<h2 id="tableLabel">Notification Preferences (labelled)</h2>
    <table aria-labelledby="tableLabel">
      <tr>
        <th>Alert Type</th>
        <th>Email</th>
        <th>Text Message</th>
      </tr>
      <tr>
        <td id="alertNewMessage">New Messages</td>
        <td>
          <input aria-labelledby="alertNewMessage" type="checkbox" />
        </td>
        <td>
          <input aria-labelledby="alertNewMessage" type="checkbox" />
        </td>
      </tr>
      <tr>
        <td id="alertBillReminder">Billing Reminders</td>
        <td>
          <input aria-labelledby="alertBillReminder" type="checkbox" />
        </td>
        <td>
          <input aria-labelledby="alertBillReminder" type="checkbox" />
        </td>
      </tr>
    </table>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  text-align: center;
}

table,
th,
td {
  border: 1px solid black;
}

table {
  table-layout: fixed;
  width: 75%;
  margin: 0 auto;
}

td {
  width: 25%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" <!DOCTYPE html>
  <html>

  <head>
    <title>Using aria-labelledby with selection cells in a data table</title>
  </head>

  <body>
    <h2>Notification Preferences (Unlabelled)</h2>
    <table>
      <tr>
        <th>Alert Type</th>
        <th>Email</th>
        <th>Text Message</th>
      </tr>
      <tr>
        <td>New Messages</td>
        <td>
          <input type="checkbox" />
        </td>
        <td>
          <input type="checkbox" />
        </td>
      </tr>
      <tr>
        <td>Billing Reminders</td>
        <td>
          <input type="checkbox" />
        </td>
        <td>
          <input type="checkbox" />
        </td>
      </tr>
    </table>

    <h2 id="tableLabel">Notification Preferences (labelled)</h2>
    <table aria-labelledby="tableLabel">
      <tr>
        <th>Alert Type</th>
        <th>Email</th>
        <th>Text Message</th>
      </tr>
      <tr>
        <td id="alertNewMessage">New Messages</td>
        <td>
          <input aria-labelledby="alertNewMessage" type="checkbox" />
        </td>
        <td>
          <input aria-labelledby="alertNewMessage" type="checkbox" />
        </td>
      </tr>
      <tr>
        <td id="alertBillReminder">Billing Reminders</td>
        <td>
          <input aria-labelledby="alertBillReminder" type="checkbox" />
        </td>
        <td>
          <input aria-labelledby="alertBillReminder" type="checkbox" />
        </td>
      </tr>
    </table>
  </body>

  </html>

【讨论】：