如何在 table 中正确地 code/label 形成控件

Question

背景：有一个三列五行的table。第一列是 "Alerts"，第二列是 "Email"，第三列是 "Text"。每行都有警报说明，在电子邮件和文本列下带有复选框，供用户选择接收或不接收通知。

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

Answer 1

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

用户应该能够轻松确定复选框的用途，并且屏幕-reader应该能够在选中复选框时听到（最好是唯一的）名称/描述。

我觉得“警报类型”（如果唯一）可以用作与复选框关联的标签。复选框应该有某种易于访问的名称。

Answer 2

假设警报列中的每个值都是唯一的，您可以为它们分配一个 id，并将 aria-labelledby 属性用于 link 每个复选框元素为其警报类型，提供所需的编程关联标签。使用正确的 table header 标记，屏幕 readers 应该使用 header 标签和 "alert type" 标签来声明元素，以提供与 table提供视觉效果。据我所知，这应该可以解决任何潜在的 1.3.1、3.3.2 和 4.1.2 故障问题。尝试运行使用屏幕 reader 浏览未标记和标记的代码段 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>

* {
  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>

如何在 table 中正确地 code/label 形成控件

How to properly code/label form controls within a table

accessibility

wcag2.0

angular