0

ヘッダー行の最初の列として「すべて選択」チェックボックスを含むテーブルがあります。

問題は、列ヘッダーが列のデータ型を表すときに完全に意味を成すことですが、この th の内容は「すべて選択」ラベルが付いた単なるチェックボックスです。

現在、その列のすべてのチェックボックスとの関係が設定されています。基本的に、すべてのチェックボックスが何らかの形で「すべて選択」に関連していると言っています。

テーブル ヘッダーの [すべて選択] チェックボックスをマークアップする方法はありますか?

「すべて選択」チェックボックスを格納するテーブルヘッダーの th を td に変更するとこれが解決されることを読みましたが (実際にそうです)、マークアップに影響を与える必要のない別の解決策があるかどうか興味がありましたヘッダー。

スクリーン リーダーは、チェックボックス テーブル ヘッダーとテーブル セルを次のように読み上げます。

これはコースの管理の表です。3 行 6 列の表 行 1 この表のすべての項目を選択 列 1 この表のすべての項目を選択 チェックボックスがオフ

row2 この表の項目をすべて選択 column 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

あなたがよく見つけたように、最初のセルはヘッダーではありません。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他の列の属性を使用して、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 に答える