Флажок «Выбрать все» в заголовке таблицы вызывает проблемы

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

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

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

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

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

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

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

row2 Выбрать все элементы в этом столбце таблицы 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>

html accessibility jaws-screen-reader nvda
person Blobula    schedule 06.10.2016    source источник
comment
Пожалуйста, предоставьте свой код.   -  person Gytis TG    schedule 06.10.2016

Ответы (3)


arrow_upward
0
arrow_downward

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

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

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

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

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

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

person Skerrvy    schedule 06.10.2016
comment
Спасибо за публикацию кода. Кажется, я был на правильном пути. «Выбрать все элементы в этой таблице» не является заголовком столбца. Этот th предназначен для предоставления контекста того, что означают элементы в этом столбце. Вот почему он считывается снова, когда средство чтения с экрана достигает первого td в строке 2. Я не знаю контекста вашей таблицы, поэтому не могу предложить правильный заголовок таблицы, но я нашел это руководство полезным при изучении семантически правильные таблицы: webaim.org/techniques/tables/data . Я надеюсь, что это может помочь. Я бы предложил поставить «выбрать все» в ноге после данных таблицы - person Skerrvy; 07.10.2016

arrow_upward
0
arrow_downward

Это своего рода побочная проблема, но, надеюсь, если вы используете ‹th> для всех других заголовков столбцов, вы также используете scope=. Не заставляйте программу чтения с экрана угадывать, является ли ваш ‹th> заголовком строки или столбца. Допустимые значения для области: «строка», «столбец», «группа строк» ​​и «группа столбцов». (Имена «групп» предназначены для составных строк и столбцов.)

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

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

person slugolicious    schedule 06.10.2016
comment
Мой комментарий предполагает, что ваш первый заголовок столбца select all содержит ячейки данных под ним, которые также являются флажками, каждый из которых является селектором для строки. Флажок для строки должен иметь метку aria, указывающую, что будет выбирать пользователь. - person slugolicious; 06.10.2016

arrow_upward
0
arrow_downward

Как вы заметили, первая ячейка не является заголовком, измените ее на 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" />
person Adam    schedule 07.10.2016