0

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

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

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

有没有办法在表格标题中标记一个“全选”复选框，以便标签方面的关系被它下面的所有复选框破坏？

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

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

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

第 2 行选择此表中的所有项目 第 1 列 Dev 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>
4

3 回答 3

0

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

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

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

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

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

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

于 2016-10-06T19:27:06.613 回答
0

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

听起来你想要一个scope=none，类似于role=none（在 ARIA 1.1 中）。没有这样的事情。如果表格中的单元格不应该是标题，则不应使用 <th>。将其设为 <td> 是标记它的正确方法。

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

于 2016-10-06T19:33:46.870 回答
0

正如您所发现的那样，第一个单元格不是标题，请将其更改为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>
  • aria-label当你已经提供了一个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" />
于 2016-10-07T08:49:42.830 回答