Question

我有一张桌子，其中包含一个＆＃39; Select All＆＃39;复选框作为标题行中的第一列。

问题是列标题在表示列的数据类型时非常有意义，但是这个列的内容只是一个带有＆＃34; Select All＆＃34;的复选框。标签

就像现在一样，它与其列中的所有复选框建立了关系，我们基本上说所有复选框都与＃34;选择全部＆＃34;。

有关。

有没有办法标记“全选”＆＃39;表格标题中的复选框是否打破了标签方面的关系以及它下面的所有复选框？

我已经读到更改表格标题中包含“全部选择”的内容。对td的复选框将解决这个问题（并且它确实如此），但是如果有另一个解决方案不会要求我影响标题的标记，那就很好奇。

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

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

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

您可以看到宣布课程的选择复选框＆＃39; Dev ILT 1＆＃39; as＆＃39;选择此表格中的所有项目＆＃39;是误导性的

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

<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

有点副作用，但希望如果您正在使用＆lt; th＆gt;对于所有其他列标题，您也使用scope=属性。不要强迫屏幕阅读器猜测您的屏幕是否正确。是行标题或列标题。范围的有效值包括＆＃39; row＆＃39;，＆＃39; col＆＃39;，＆＃39; rowgroup＆＃39;和＆＃39; colgroup＆＃39;。（＆＃39;组＆＃39;名称用于跨越的行和列。）

听起来你喜欢scope=none，类似于role=none（在ARIA 1.1中）。没有这样的事情。如果表中的单元不应该是标题，那么＆lt; th＆gt;不应该使用。使其成为＆lt; td＆gt;是标记它的正确方法。

现在，如果您在＆lt; td＆gt;上使用header=，则可能会伪造它。第一列中的元素将它们与列标题取消关联，但我还没有尝试过。我不确定如果你有一个正确标记的＆lt; th＆gt;会发生什么。然后是＆lt; td header =＆＃39; foo＆gt;＆gt;在它下面，在哪里＆＃39; foo＆＃39;是您网页上的另一个对象。屏幕阅读器可能仍会读取列标题。不过，这可能值得一试。

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>

如果您已提供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>

制作＆＃34;选择＆＃34;和＆＃34;所有＆＃34;文字可见将使事情更清晰。

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

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

表标题中的Select All复选框导致问题

3 个答案: