Accessibility 是表格标题<；th>；如果我提供'，则表为必填项；aria标签'；到细胞元素？

我的网页中有一个表。它有列标题和行标题。每个单元格中都有一个复选框。不可能为所有复选框提供可视标签，因此我使用“aria label”属性提供标签。 当我使用表格快捷键（Alt+Ctrl+箭头键）导航时，屏幕阅读器会显示行标题、列标题和“aria标签”文本。 例如，“未选中操作1复选框为所有事件列2选择操作1”，这是多余的

因此，如果我删除这两个表头，屏幕阅读器将只宣布“aria标签”文本，这是有意义的，足以确定复选框的用途。但根据WCAG指南（1.3.1信息和关系），表必须具有与表数据关联的标题

下面是我的问题：

如果我删除表标题- 它会违反WCAG合规性吗？。屏幕阅读器用户与表？的交互是什么？他们是否总是需要用于导航的标题？。屏幕阅读器用户是否只能通过听到“aria标签”文本来完成表格活动

请参阅代码片段：

事件
行动1
行动2
行动3
全选
事件1
事件2

---

提前谢谢

保留表格标题。当作为表（CTRL+ALT+箭头）导航时，典型的屏幕阅读器行为是仅在到达新行或新列时才宣布标题，这是为了防止不必要的重复。但是，有些事情，如公布行数和列数，可以由用户自定义。在这里使用

aria-label

会通过强制重复语音来稍微干扰这些偏好

相反，使用

aria labelledby

将行标题和列标题与每个复选框关联，如下所示：

<table>
    <tr>
        <th scope="col" width="40%">Events</th>
        <th id="a1" scope="col" align="left">Action 1</th>
        <th id="a2" scope="col" align="left">Action 2</th>
        <th id="a3" scope="col" align="left">Action 3</th>
    </tr>
    <tr>
    <th id="sa" scope="row">Select All</th>
    <td><input type="checkbox" name="Action11" id="Action11" aria-labelledby="sa a1" /></td>
    <td><input type="checkbox" name="Action12" id="Action12" aria-labelledby="sa a2" /></td>
    <td><input type="checkbox" name="Action13" id="Action13" aria-labelledby="sa a3" /></td>
    </tr>
    <tr>
        <th id="e1" scope="row">Event 1</th>
        <td><input type="checkbox" name="Action21" id="action21" aria-labelledby="e1 a1" /></td>
        <td><input type="checkbox" name="Action22" id="action22" aria-labelledby="e1 a2"  /></td>
        <td><input type="checkbox" name="Action23" id="Action23" aria-labelledby="e1 a3"  /></td>
    </tr>
    <tr>
        <th id="e2" scope="row">Event 2</th>
        <td><input type="checkbox" name="Action31" id="action31" aria-labelledby="e2 a1" /></td>
        <td><input type="checkbox" name="Action32" id="action32" aria-labelledby="e2 a2"  /></td>
        <td><input type="checkbox" name="Action33" id="Action33" aria-labelledby="e2 a3"  /></td>
    </tr>
</table>

事件
行动1
行动2
行动3
全选
事件1
事件2

如果我删除了表头，它会违反WCAG合规性吗

当您可以考虑不显示表格数据并使用<代码>表< /代码>标签进行布局时，WCAG允许您使用布局表中的<代码>表< /代码>标签。（）

IMHO，你展示的是一个包含3个动作的事件列表。您可以认为这不是数据<代码>表< /> >

在您的情况下，问题在于我不知道如何通过删除表格标题和复选框没有视觉

标签

，帮助没有屏幕阅读器的人了解复选框的意图<代码>aria标签对于不使用屏幕阅读器的人没有任何用处。WCAG需要视觉指示

---

为清晰起见，请编辑：

WCAG主要关注数据表（需要标题），但不禁止布局表（禁止标题）。这里的所有问题都是要理解您的表是真正的数据表还是布局表

例如，在这里，您可以使用

ul

列表：

Events
<ul>
  <li>Event 1
    <input type="checkbox" title="Action1" aria-label="Action1" />
    <input type="checkbox" title="Action2" aria-label="Action2" />
    <input type="checkbox" title="Action3" aria-label="Action3" />
  </li>
  <li>Event 2
    <input type="checkbox" title="Action1" aria-label="Action1" />
    <input type="checkbox" title="Action2" aria-label="Action2" />
    <input type="checkbox" title="Action3" aria-label="Action3" />
  </li>
</ul>

事件

事件1

事件2

这使我认为您的表不是数据表，您使用

table

标记仅用于垂直对齐的设计

这是相当概念化的

---

编辑2:ul与td的这种替代使用（这只是为了说明您并没有真正使用数据表）并不能解决可见标签的问题（奇怪的是，这在WCAG中也不是要求）

我的意见是，复选框旁边的可见标签是最好的选择。如果不能，您有两个选择：

聚焦字段时依靠javascript显示title属性

在每个复选框旁边使用小图标（带有可用于标记字段的正确替代文本）

---

我同意亚当的观点。此表似乎用于布局，而不是显示结构化表格数据

布局表没有问题，但不应该使用表标题元素（而是使用），并删除所有的aria标记，以避免混淆屏幕阅读器用户。使用标准HTML表单标签，而不是aria labelledby属性

放置额外的数据表标记（即表头、aria标记）实际上会导致其不易访问，而不管任何自动测试工具会告诉您什么

如果您有兴趣了解更多有关此主题的信息，WebAIM对布局表和数据表有很好的解释

---

谢谢史蒂夫，这真的很有帮助。在发布这个问题之前，我也使用“aria labelledby”进行了POC，但我想使用“aria label”为复选框提供更多描述性标签。我用JAWS+IE测试了您的代码。因此，在表格模式下，JAWS只宣布表格标题，而在选项卡模式下，JAWS只宣布由“aria labelledby”引用的文本，但不会宣布标题文本两次。看来我应该选《阿丽亚·拉贝尔德比》，这很有趣。我很想知道当鼠标悬停在复选框上时JAWS会宣布什么。我认为

aria labeledby

是一种更安全的方法，可以减少重复和可能的作者错误，但很明显，在这种情况下，屏幕阅读器和浏览器行为的完整矩阵可能会出现一些值得记录的不一致。嗨，亚当，谢谢你的回答。对不起，我没有澄清我的问题。如果我删除了表头，它会违反WCAG合规性吗？我

Events
<ul>
  <li>Event 1
    <input type="checkbox" title="Action1" aria-label="Action1" />
    <input type="checkbox" title="Action2" aria-label="Action2" />
    <input type="checkbox" title="Action3" aria-label="Action3" />
  </li>
  <li>Event 2
    <input type="checkbox" title="Action1" aria-label="Action1" />
    <input type="checkbox" title="Action2" aria-label="Action2" />
    <input type="checkbox" title="Action3" aria-label="Action3" />
  </li>
</ul>