Соблюдение 508 требований к доступности для сложных таблиц данных

Question

Я использую расширение для Firefox, чтобы проверить наличие проблем с соответствием 508.найдено здесь:

https://addons.mozilla.org/en-US/firefox/addon/accessibility-evaluation-toolb/

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

Ошибка: таблицы данныхдолжны использовать th-элементы, чтобы указать ячейки заголовка для первой ячейки во всех столбцах или строках.

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

Аддон выделяет следующую ячейку таблицы для обеих ошибок, но я не могу найти в этом ничего плохого:

<table cellpadding="5"  width="100%" style ="text-align:right" class ="ecoRow" summary="Budget History" title="Budget History">

<tr> <th id="date_range"  colspan="7" style="text-align:center;">From #params.start_date# To #params.end_date#</th></tr>

Что делать?

Answer 1

Я использую это расширение Firefox и столкнулся с этой же проблемой сегодня. Похоже, что инструмент хочет видеть текст внутри элемента.

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

Результаты могут отличаться, но это исправило нашу проблему. Обратите внимание, что у проходящих строк есть фактический текст между тегами.

• Ошибка: <th><input type="button" text="blah"></input></th>
• Ошибка: <th><img url="blah.jpg"></img></th>
• Пропуск: <th><a href="www.blah.com">blah</a></th>
• Пропуск: <th><span>blah</span></th>
• Пропуск: <th>blah</th>

Answer 2

Я вижу несколько вещей в таблице, которые можно улучшить (встроенные стили, отсутствие <tbody> и т. Д.), Но идентификация заголовка не является одной из них.Опять же, я не вижу всю таблицу.Но похоже, что плагин явно не понимает кольспан.Попробуйте добавить scope="col" к заголовку.

Для альтернативного плагина попробуйте панель инструментов WAVE: http://wave.webaim.org/toolbar

ОБНОВЛЕНИЕ : Теперь я вижу таблицу с помощьюссылка на прошлую ссылку в комментарии, я вижу некоторые серьезные проблемы.Прежде всего, нет закрывающего тега таблицы.У вас есть ряды шире, чем другие.У вас есть пустая строка, которая была вставлена ​​для отображения.Не делайте этого, используйте CSS.