如何在表中正确编码/标记窗体控件
背景:有一个有三列五行的表。第一栏是“警报”，第二栏是“电子邮件”，第三栏是“文本”。每行在“电子邮件”和“文本”列下都有带有复选框的警报描述，供用户选择进入或退出以接收通知。
问:这些复选框是否需要有相关的标签？窗体控件(复选框)没有关联的标签，但与表相关联。例如。用户读取警报类型，转到第二列以选中/取消复选框以选择电子邮件警报，而对于第三列则为文本警报选择复选框。从屏幕阅读器的角度来看，由于列标题和行的上下文，它仍然是可以理解的，但是对于WCAG2.1AA可访问性要求来说，标签是绝对必要的吗？
回答 2
Stack Overflow用户
发布于 2019-07-24 15:41:10
回答你的问题:你不需要有一个<label>。WCAG还有其他实现相同目标的方法，比如使用相邻的按钮：https://www.w3.org/WAI/WCAG21/Techniques/general/G167.html
用户应该能够轻松地确定复选框的用途，屏幕阅读器在聚焦复选框时应该能够听到(最好是唯一的)名称/描述。
在我看来，“警报类型”(如果唯一)可以用作与复选框相关联的标签。无论如何，复选框应该有某种可访问的名称。
Stack Overflow用户
发布于 2019-08-20 06:56:59
假设警报列中的每个值都是唯一的，则可以为它们分配一个id，并使用aria-labelledby属性将每个复选框元素链接到其警报类型，从而提供所需的以编程方式关联的标签。有了适当的表头标记，屏幕阅读器应该同时宣布带有标题标签和它的“警报类型”标签的元素，以提供与表可视化提供的相同的上下文。据我所知，这应该可以解决任何潜在的1.3.1、3.3.2和4.1.2故障问题。尝试使用屏幕读取器运行代码段，在未标签和标签表中导航以查看差异。
相关代码片段：
<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>
https://stackoverflow.com/questions/57186278
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号