Выделить все флажок в заголовке таблицы вызывает

Question

---

У меня есть таблица, которая содержит флажок «Выбрать все» в качестве первого столбца в строке заголовка.

Проблема заключается в том, что заголовки столбцов имеют смысл, когда они представляют тип данных своих столбцов, но содержимое этого раздела - это всего лишь флажок с меткой «Выбрать все».

Как и сейчас, он устанавливает связь со всеми флажками в своем столбце, мы в основном говорим, что все флажки связаны с «Выбрать все».

Есть ли способ разметки флажка «Выбрать все» в заголовке таблицы, так что отношения с точки зрения маркировки сломаны всеми флажками под ним?

Я читал, что изменение th в заголовке таблицы, где размещается флажок «Выбрать все», будет решить эту проблему (и это произойдет), но было любопытно, есть ли другое решение, которое не требовало бы меня влияют на разметку заголовка.

чтения с экрана читает следующим образом для ячейки таблицы флажок заголовка и таблицы:

Это таблица управления курсами. Таблица 3 строк и 6 столбцов строк 1 Выберите все элементы в этом столбце таблицы 1 Выберите все элементы в этой таблице флажка не проверен

row2 Выберите все элементы в этом столбце таблицы 1 Dev ILT 1 флажка не проверено

Как вы можете видеть, объявляя выберите флажок для курса «Dev ИЛТ 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

У меня трудно понять, как «Select All» является действительным заголовком. Заголовок предназначен для предоставления контекста для данных в связанных ячейках. При правильном использовании экранный считыватель считывает заголовок при навигации по столбцу/строке.

Если кто-то переходит из ячейки во втором столбце в ячейку в первом, было бы теоретически прочитать

«[h1] Выбрать все флажок снят [/ h1] [TD] ввод метки флажок бесконтрольно [тд]»

(квадрат содержание скобка добавил для ясности - если вы перемещаетесь из одной колонки в другую, заголовок столбца считывается перед данными для каждого нового столбца навигации в)

Это вряд ли дает contex t о том, что такое флажок. Флажок «Выбрать все» скорее всего будет использоваться как последний элемент или даже элемент нижнего колонтитула, а не заголовок.

Трудно полностью понять без примера кода, но я бы предложил никогда не включать функциональные элементы в заголовок таблицы. Он предназначен для фразирования контента.

Answer 2

Вид побочной проблемы, но, если вы используете < th> для всех других заголовков столбцов, вы также используете свойство scope=. Не заставляйте экранное устройство угадывать, является ли ваш < th> заголовком строки или заголовком столбца. Допустимыми значениями для области являются «row», «col», «rowgroup» и «colgroup». (Названия «группы» относятся к разнесенным строкам и столбцам.)

Похоже, вы хотели бы получить scope=none, аналогичный role=none (в ARIA 1.1). Это не так. Если ячейка в таблице не должна быть заголовком, тогда не следует использовать th>. Сделать его < td> - это правильный способ его разметки.

Теперь вы можете подделать его, если вы используете header= в элементах < td> в своем первом столбце, чтобы отделить их от заголовка столбца, но я этого не пробовал. Я не уверен, что произойдет, если у вас есть правильно обозначенный < th>, а затем под ним < td header = 'foo'>, где «foo» - это еще один объект на вашей странице. Считыватель экрана может по-прежнему читать заголовок столбца. Однако, возможно, стоит попробовать.

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> 

Making «Выбор» и «Все» текст видимым будет делать вещи яснее.

Вы также должны пересмотреть метку ваших других флажков как 1, 2, 3, ... не очень описательны.

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