表头中的全选复选框导致问题

Question

---

我有一个表格，其中包含一个“全选”复选框作为标题行的第一列。

问题是列标题在表示其列的数据类型时非常有意义，但此 th 的内容只是一个带有“全选”标签的复选框。

现在，它设置了与其列中所有复选框的关系，我们基本上是说所有复选框都与“全选”相关。

有什么方法可以在表格标题中标记一个“全选”复选框，这样在标签方面的关系就会被它下面的所有复选框破坏？

我已经读过将包含“全选”复选框的表头中的 th 更改为 td 将解决此问题（确实如此），但很好奇是否有其他解决方案不需要我影响标头的标记。

对于复选框表格标题和表格单元格，屏幕阅读器读取如下：

这是管理课程表。 3行6列的表格 第 1 行 选择此表中的所有项目 第 1 列 选择此表中的所有项目 复选框未选中

row2 选择此表第 1 列中的所有项目 开发 ILT 1 复选框未选中

如您所见，将“Dev ILT 1”课程的选择复选框宣布为“选择此表中的所有项目”具有误导性

代码示例。这只是标题和正文部分。代码示例中并未列出所有行或标题，因为它不相关

<thead>
<tr class="thead-main">        
    <th align="center" scope="col" valign="top" class="colheadcheckbox">  
        <input type="checkbox" aria-label="Select all items in this table" onclick="SelectAllCheckbox.CheckUncheckAll(this, 'selectedID')" id="SelectAll">
        <label for="SelectAll"><span class="hidden">Select all items in this table.</span></label>
    </th>            
    <th scope="col" align="left" valign="middle" class="colhead"> 
        <a href="?reverseSortBy=Name" title="Sort this column by descending order" class="sortdown"> 
        <span>   Name  </span>  
        <img src="/geonext/images/skins/simple/schemes/dalmatian/indicator_sort_up.png" width="9" height="9" border="0" alt="This column is sorted by ascending order" title="This column is sorted by ascending order">  </a> 
    </th>         
    <th scope="col" align="left" valign="top" class="colhead">  
        <a href="?sortBy=Code" title="Sort this column by ascending order">   Course Code  </a> 
    </th>          
    <th scope="col" align="left" valign="top" class="colhead">  
        <a href="?sortBy=class" title="Sort this column by ascending order">   Type  </a> 
    </th>          
</tr>
</thead>
<tbody>   
<tr class="first odd">            
    <td align="center" valign="middle" class="">  
        <input type="checkbox" class="checkbox with-font" name="selectedID" id="selectedID2" value="2"> 
        <label for="selectedID2"><span class="hidden"> 2</span></label>
    </td>            
    <td class="sorted" align="Left"> 
        <label for="selectedID2"><a href="/editcourse.geo?id=2">Dev ILT 1</a> 
        </label> 
    </td>             
    <td align="Left"> ILT1 </td>             
    <td align="Left"> Instructor Led </td>                
</tr>    
<tr class="even">            
    <td align="center" valign="middle" class="">  
        <input type="checkbox" class="checkbox with-font" name="selectedID" id="selectedID1" value="1"> 
        <label for="selectedID1"><span class="hidden"> 1</span> </label>  
    </td>            
    <td class="sorted" align="Left">
        <label for="selectedID22507408476"><a href="/editcourse.geo?id=1">Dev UDT 1</a></label> 
    </td>             
    <td align="Left"> UDT1 </td>             
    <td align="Left"> User Defined Task </td>                   
</tr>        '
</tbody>

Answer 1

我很难理解“全选”是一个有效的标题。标题旨在为相关单元格中的数据提供上下文。如果使用得当，屏幕阅读器会在您导航到列/行时读出标题。

如果有人从第二列中的单元格导航到第一列中的单元格，理论上它会读取

"[h1]全选复选框未选中[/h1] [td]输入标签复选框未选中[td]"

（为清楚起见添加了方括号内容 - 如果您从一列导航到下一列，则在您导航到的每个新列的数据之前读出列标题）

这很难提供关于复选框是什么的上下文。 “全选”复选框应该更可能用作最后一个元素，甚至是页脚元素，而不是标题。

如果没有代码示例，很难完全理解，但我建议永远不要在表格标题中包含功能元素。它用于措辞内容。

Answer 2

有点问题，但希望如果您将

用于所有其他列标题，那么您也可以使用 scope= 属性。不要强迫屏幕阅读器猜测您的 是行标题还是列标题。范围的有效值为“row”、“col”、“rowgroup”和“colgroup”。 （“组”名称用于跨行和跨列。）

听起来您想要scope=none，类似于role=none（在ARIA 1.1 中）。没有这样的事情。如果表格中的单元格不应该是标题，则不应使用

。将其设为 是标记它的正确方法。

现在，如果您在第一列中的

元素上使用 header= 将它们与列标题分离，您可能可以伪造它，但我没有尝试过。我不确定如果你有一个正确标记的 然后在它下面有一个 会发生什么，其中 'foo' 是页面上的另一个对象。屏幕阅读器可能仍会读取列标题。不过，这可能值得一试。

【讨论】：

• 我的评论是假设“全选”的第一个列标题包含其下方的数据单元格，这些单元格也是复选框，每个复选框都是该行的选择器。该行的复选框应该有一个 aria-label 指定用户将选择的内容。

Answer 3

如您所见，第一个单元格不是标题，请将其更改为 td

<td align="center" valign="top" class="colheadcheckbox">  
    <input type="checkbox" aria-label="Select all items in this table" 
           title="Select all items in this table" onclick="..." />
</td>

• 当您已经提供了label 时，使用aria-label 是没有用的
• 您可以使用title 属性为想要了解此复选框的非屏幕阅读器用户提供提示； title 在控制元素上使用时得到屏幕阅读器的正确支持。

您还可以考虑对其他列使用rowspan=2 属性的两行解决方案：

 <tr>
    <th scope="col">Select</th><th rowspan="2" scope="col">... </th>
 </tr><tr>
    <td><label><input type="checkbox" onclick="..." />All</label></td>
 </tr>

使“选择”和“全部”文本可见将使事情更清晰。

您还应该重新考虑其他复选框的标签，因为 1、2、3、... 的描述性不强。

<input type="checkbox" id="selectedID1" value="1" title="Select Dev UDT 1" />