Правильный доступ к HTML-таблицам

У меня есть таблица данных, используемая на странице, которая должна соответствовать стандартам доступности WCAG 2.0 AA, но Мой клиент сказал мне, что стол не соответствует основным стандартам доступности.

Мой клиент использует онлайн-сервис под названием Cynthia Says, который выдает всевозможные ошибки. Поэтому я провел аналогичный тест, используя другой сервис от Total Validator, который показал, что все в порядке. Очевидно, что в дополнение к этому я прочитал большую часть рекомендаций, но я все еще не чувствую, что у меня достаточно ясности, чтобы вернуться к клиенту и успокоить его или внести исправление, которое мне нужно.

Насколько я понимаю, <summary> устарел в HTML5 и, хотя и потенциально полезен, не является требованием стандартов W3C.

Единственное, что я могу придумать, - это добавить область видимости к элементам <th> или, возможно, <td>, но насколько я могу судить из документации по этому поводу (http://www.w3.org/TR/WAI-WEBCONTENT/wai-pageauth.html#tech-table-headers), в этом контексте просто наличие <th> должно работать.

Я добавил несколько примеров разметки ниже и был бы признателен за любые указатели:

<table>
    <caption>
    This is a caption
    </caption>
    <thead>
        <tr>
            <th>Day</th>
            <th>Time</th>
            <th>Lesson</th>
        </tr>
    </thead>

    <tbody> 
        <tr>
            <td rowspan="3"><strong>Monday</strong></td>
            <td>19:00 - 19:45</td>
            <td>Lesson 1</td>
        </tr>
        <tr>
            <td>18:00 - 19:00</td>
            <td>Lesson 2</td>
        </tr>
        <tr>
            <td>19:00 - 20:00</td>
            <td>Lesson 3</td>
        </tr>
        <tr>
            <td rowspan="4"><strong>Tuesday</strong></td>
            <td>09:15 - 09:45</td>
            <td>Lesson 1</td>
        </tr>
        <tr>
            <td>17:45 - 18:15</td>
            <td>Lesson 2</td>
        </tr>
        <tr>
            <td>18:15 - 18:45</td>
            <td>Lesson 3</td>
        </tr>
        <tr>
            <td>19:00 - 20:00</td>
            <td>Lesson 4</td>
        </tr>
        <tr>
            <td rowspan="2"><strong>Wednesday</strong></td>
            <td>18:00 - 19:00</td>
            <td>Lesson 1</td>
        </tr>
        <tr>
            <td>19:00 - 20:00</td>
            <td>Lesson 2</td>
        </tr>
        <tr>
            <td rowspan="4"><strong>Thursday</strong></td>
            <td>07:30 - 08:00</td>
            <td>Lesson 1</td>
        </tr>
        <tr>
            <td>18:00 - 19:00</td>
            <td>Lesson 2</td>
        </tr>
        <tr>
            <td>19:15 - 19:45</td>
            <td>Lesson 3</td>
        </tr>
        <tr>
            <td>19:45 - 20:15</td>
            <td>Lesson 4</td>
        </tr>
        <tr>
            <td rowspan="3"><strong>Friday</strong></td>
            <td>07:15 - 07:45</td>
            <td>Lesson 1</td>
        </tr>
        <tr>
            <td>15:30 - 17:00</td>
            <td>Lesson 2</td>
        </tr>
        <tr>
            <td>18:00 - 19:00</td>
            <td>Lesson 3</td>
        </tr>
    </tbody>
</table>

html html-table accessibility wcag wcag2.0
person UntitledGraphic    schedule 27.07.2014    source источник
comment
Вы имеете в виду WCAG 2.0 AA со стандартами доступности AA?   -  person unor    schedule 27.07.2014
comment
@unor да этот, извините за непонятность   -  person UntitledGraphic    schedule 27.07.2014

Ответы (1)


arrow_upward
4
arrow_downward

Дневные клетки:

<td rowspan="3"><strong>Monday</strong></td>

являются заголовками и должны использовать th элементы вместо td:

<th scope="rowgroup" rowspan="3">Monday</th>

и поскольку у вас есть двухосная таблица, scope следует добавить в заголовки в thead:

<thead>
    <tr>
        <th scope="col">Day</th>
        <th scope="col">Time</th>
        <th scope="col">Lesson</th>
    </tr>
</thead>

См. WCAG 2, H63: Использование атрибута области для связывания ячеек заголовка и ячеек данных в данных таблицы для объяснения.

person steveax    schedule 27.07.2014
comment
Спасибо Stevax. У меня было ощущение, что добавление scope="col" для основных заголовков станет частью ответа, но я не знал, что дневные ячейки также образуют заголовок. Хотя сейчас это кажется очевидным, вы указываете на это. На странице, на которую вы ссылаетесь, также говорится, что все элементы td, которые действуют как заголовки для других элементов, имеют атрибут области. Означает ли это, что для дневных ячеек также может быть написан код <th scope="rowgroup" rowspan="3"><strong>Monday</strong></th>? Я знаю, что это семантически неверно, но просто проверяю, правдоподобно ли это. - person UntitledGraphic; 27.07.2014
comment
Ах нет, подожди. Просто думаю об этом последнем вопросе. Вероятно, не стоит пытаться это сделать, так как это было бы уместно в другом контексте, когда, возможно, tds охватывает другие ячейки в основной части таблицы. - person UntitledGraphic; 27.07.2014
comment
@CraigCooper элементы strong не должны быть нужны в заголовках строк, я обновил ответ, чтобы отразить это. - person steveax; 27.07.2014