Таблицы данных и таблицы форматирования

Избегайте пустых столбцов и ячеек таблицы

Иногда разработчики используют пустые столбцы для того, чтобы разграничить ячейки в таблице.

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

Поэтому для контроля презентации информации в таблицах данных вместо пустых ячеек следует использовать каскадные листы стилей (CSS).

Проверка доступности таблицы данных

Авторы Роджер Хадсон и Русс Викли разработали страницу критериев оценки доступности таблиц данных (Roger Hudson, Russ Weakley Data Table Accessibility Test). Разметка таблицы оценивается в по определенны критериям, таким образом, проверяется, насколько эта таблица доступна для пользователей «скрин ридеров» и программ, поддерживающих шрифт Брайля. Страница проверки содержит 4 таблицы: одну простую таблицу данных и три сложные таблицы с несколькими уровнями заголовочных ячеек.

В разметке двух из находящихся на этой странице сложных таблиц использовались ‘id’ и ‘headers’ атрибуты, которые дают возможность сопоставления строк и столбцов с соответствующими заголовочными ячейками. В разметке третьей таблицы использовались атрибуты ‘scope’, ‘col’ и ‘row’, которые группируют ячейки одной строки или одного столбца.

На этом этапе доступность таблиц проверялась следующими «скрин ридерами»:

• JAWS ( версии 4.02, 5.1, 6.0 и 6.2);
• Window-Eyes 5.0;
• Connect Outloud 2.0.

Не для одной из программ не составило труда прочесть те таблицы, в разметке которых использовались ‘id и ‘headers’ атрибуты. О том, как работает «скрин ридер» JAWS , говорилось ранее. А вот поддержка программами атрибута ‘scope’ вызывает сомнение.

Элементы разметки ‘scope’, ‘col’ и ‘row’

Использование атрибутов ‘scope’ с элементами ‘col’ и ‘colgroup’ является эффективным методом группировки заголовков и информации в столбцы для повышения доступности таблицы. Использование этого атрибута с элементами ‘row’ and ‘rowgroup’ встречается довольно редко, очень сомнительно, что такая комбинация влияет на повышение доступности.

Ниже приводится таблица «Медные и стальные болты и гайки», в разметке которой используются элементы ‘scope’, ‘col’ и ‘row’:

ВОПРОС: Какова оптовая цена десятисантиметровых медных гаек?

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

<table border ="1" summary ="Оптовые и розничные цены на десяти- и двадцатисантиметровые медные и стальные болты и гайки. Два уровня заголовочных столбцов.">
   <caption> Цены на медные и стальные болты и гайки </caption>
   <colgroup>
   < colgroup span="2" >
   <colgroup span="2">
   <thead>
      <tr>
         <td></td>
         <th scope="colgroup" colspan="2"> Медные </th>
         <th scope="colgroup" colspan="2"> Стальные </th
      </tr>
      <tr>
         <td></td>
         <th scope="col"> Болты </th>
         <th scope="col" > Гайки </th>
         <th scope="col"> Болты </th>
         <th scope="col"> Гайки </th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th scope="rowgroup" colspan="5">10 см </th>
      </tr>
      <tr>
         <th scope="row" > Опт </th>
         <td>1.00 у.е. </td>
         <td>1.25 у.е. </td>
         <td>1.20 у.е. </td>
         <td>1.00 у.е. </td>
      </tr>
      <tr>
         <th scope="row"> Розница </th>
... продолжение разметки...

Для пользователя «скрин ридера» не удастся найти ответ на вопрос из таблицы с подобной разметкой (где используется элемент ‘scope’).

Ячейка «1.25 у.е.» является искомой.

- JAWS версии 5.1 огласит ее так:

«третий столбец, четвертая строка, медные, опт, одна целая двадцать пять сотых условной единицы».

Замечание: ничего не сказано о размере (10 см) и о том, что это - цена именно на гайки.

- JAWS версии 6.2:

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

Замечание: не указан размер (10 см).

- Windows-Eyes вообще не поддерживает ‘scope’.

Заключение

Во-первых, еще раз следует отметить, что нужно создавать по возможности простые таблицы. Таблицы с несколькими уровнями заголовков намного труднее кодировать и намного труднее читать тем, кто использует вспомогательные технологии.

В настоящий момент использование атрибутов ‘id’ и ‘headers’ является наиболее эффективным методом повышения доступности сложных таблиц. Хотя прописать в коде элемент ‘ scope’ намного проще, чем атрибуты ‘id’ и ‘headers’, он не представляет большой ценности и не влияет на улучшение доступности таблицы.