Как использовать атрибут headers, чтобы сделать таблицу A11Y-совместимой?
Я создаю приложение, которое должно соответствовать WCAG 2.0. Я проверяю свои страницы с помощью AChecker и испытываю некоторые проблемы с table, Я получаю следующие 2 вопроса:
- Таблица данных с заголовками строк и столбцов не использует область для идентификации ячеек
- Таблица данных с более чем одной строкой / столбцом заголовков не использует атрибуты id и headers для идентификации ячеек
Вот исходный код моей таблицы:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<body>
<table class="ui celled center aligned unstackable table seven column day">
<thead>
<tr>
<th colspan="7">
<span class="link">Giugno 2017</span>
<span class="prev link">
<span class="ifix chevron left icon"></span>
</span>
<span class="next link">
<span class="ifix chevron right icon"></span>
</span>
</th>
</tr>
<tr>
<th>Dom</th>
<th>Lun</th>
<th>Mar</th>
<th>Mer</th>
<th>Gio</th>
<th>Ven</th>
<th>Sab</th>
</tr>
</thead>
<tbody>
<tr>
<td class="link adjacent disabled">28</td>
<td class="link adjacent disabled">29</td>
<td class="link adjacent disabled">30</td>
<td class="link adjacent disabled">31</td>
<td class="link">1</td>
<td class="link">2</td>
<td class="link">3</td>
</tr>
<tr>
<td class="link">4</td>
<td class="link today focus">5</td>
<td class="link">6</td>
<td class="link">7</td>
<td class="link">8</td>
<td class="link">9</td>
<td class="link">10</td>
</tr>
<tr>
<td class="link">11</td>
<td class="link">12</td>
<td class="link">13</td>
<td class="link">14</td>
<td class="link">15</td>
<td class="link">16</td>
<td class="link">17</td>
</tr>
<tr>
<td class="link">18</td>
<td class="link">19</td>
<td class="link">20</td>
<td class="link">21</td>
<td class="link">22</td>
<td class="link">23</td>
<td class="link">24</td>
</tr>
<tr>
<td class="link">25</td>
<td class="link">26</td>
<td class="link">27</td>
<td class="link">28</td>
<td class="link">29</td>
<td class="link">30</td>
<td class="link adjacent disabled">1</td>
</tr>
<tr>
<td class="link adjacent disabled">2</td>
<td class="link adjacent disabled">3</td>
<td class="link adjacent disabled">4</td>
<td class="link adjacent disabled">5</td>
<td class="link adjacent disabled">6</td>
<td class="link adjacent disabled">7</td>
<td class="link adjacent disabled">8</td>
</tr>
</tbody>
</table>
</body>
</html>
Ссылка на связанный Plunker.
Согласно этой странице документации W3C вы знаете правильный способ использования headers в моем случае?
Я попытался сделать это сам и отредактировал свой код. Вот результат:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<body>
<table class="ui celled center aligned unstackable table seven column day">
<thead>
<tr>
<th id="month" scope="col" colspan="7">
<span class="link">Giugno 2017</span>
<span class="prev link">
<span class="ifix chevron left icon"></span>
</span>
<span class="next link">
<span class="ifix chevron right icon"></span>
</span>
</th>
</tr>
<tr>
<th id="dom" headers="month" scope="col">Dom</th>
<th id="lun" headers="month" scope="col">Lun</th>
<th id="mar" headers="month" scope="col">Mar</th>
<th id="mer" headers="month" scope="col">Mer</th>
<th id="gio" headers="month" scope="col">Gio</th>
<th id="ven" headers="month" scope="col">Ven</th>
<th id="sab" headers="month" scope="col">Sab</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="dom" class="link adjacent disabled">28</td>
<td headers="lun" class="link adjacent disabled">29</td>
<td headers="mar" class="link adjacent disabled">30</td>
<td headers="mer" class="link adjacent disabled">31</td>
<td headers="gio" class="link">1</td>
<td headers="ven" class="link">2</td>
<td headers="sab" class="link">3</td>
</tr>
<tr>
<td headers="dom" class="link">4</td>
<td headers="lun" class="link today focus">5</td>
<td headers="mar" class="link">6</td>
<td headers="mer" class="link">7</td>
<td headers="gio" class="link">8</td>
<td headers="ven" class="link">9</td>
<td headers="sab" class="link">10</td>
</tr>
<tr>
<td headers="dom" class="link">11</td>
<td headers="lun" class="link">12</td>
<td headers="mar" class="link">13</td>
<td headers="mer" class="link">14</td>
<td headers="gio" class="link">15</td>
<td headers="ven" class="link">16</td>
<td headers="sab" class="link">17</td>
</tr>
<tr>
<td headers="dom" class="link">18</td>
<td headers="lun" class="link">19</td>
<td headers="mar" class="link">20</td>
<td headers="mer" class="link">21</td>
<td headers="gio" class="link">22</td>
<td headers="ven" class="link">23</td>
<td headers="sab" class="link">24</td>
</tr>
<tr>
<td headers="dom" class="link">25</td>
<td headers="lun" class="link">26</td>
<td headers="mar" class="link">27</td>
<td headers="mer" class="link">28</td>
<td headers="gio" class="link">29</td>
<td headers="ven" class="link">30</td>
<td headers="sab" class="link adjacent disabled">1</td>
</tr>
<tr>
<td headers="dom" class="link adjacent disabled">2</td>
<td headers="lun" class="link adjacent disabled">3</td>
<td headers="mar" class="link adjacent disabled">4</td>
<td headers="mer" class="link adjacent disabled">5</td>
<td headers="gio" class="link adjacent disabled">6</td>
<td headers="ven" class="link adjacent disabled">7</td>
<td headers="sab" class="link adjacent disabled">8</td>
</tr>
</tbody>
</table>
</body>
</html>
Ссылка на связанный Plunker.
Теперь AChecker говорит, что на странице нет известных проблем. В любом случае можете ли вы подтвердить, что моя модификация является правильным способом использования id а также headers в случае более чем одного th элемент в таблице?
1 ответ
Решение
То, что вы делаете во второй таблице, технически правильно. Когда у тебя есть colspanс и rowspanс, или когда у вас есть несколько <th>с, то этот подход делает его доступным. Некоторые ресурсы (которые вы, возможно, уже читали):
- H43: Использование атрибутов id и headers для связывания ячеек данных с ячейками заголовка в таблицах данных из W3C Techniques for WCAG 2.0.
- Создание доступных таблиц из WebAIM (ссылка на соответствующий раздел на странице).
Однако этот подход многословен. Вы можете использовать <caption> вместо этого для вашего месяца / года, поэтому он не объявляется с каждой ячейкой (для большинства программ чтения с экрана, может быть, всех).
Это означает, что ваши пользователи все еще получают контекст, но не должны слушать его в каждой ячейке. В любой момент они могут вернуться, чтобы подтвердить заголовок таблицы.