Таблицы данных и таблицы форматирования
Автор статьи: Наталья Щеголева ©
Сайт Автора: www.seo.su
E-mail Автора: natasha@regioninfo.ru
Дата публикации: 25.04.2006

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

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

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

Поэтому для контроля презентации информации в таблицах данных вместо пустых ячеек следует использовать каскадные листы стилей (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’:

Цены на медные и стальные болты и гайки

 

Медные

Стальные

 

Болты

Гайки

Болты

Гайки

10 см

Опт

1.00 у.е.

1.25 у.е.

1.20 у.е.

1.00 у.е.

Розница

2.00 у.е.

3.00 у.е.

1.80 у.е.

1.60 у.е.

20 см

Опт

1.20 у.е.

1.30 у.е.

1.00 у.е.

0.80 у.е.

Розница

1.60 у.е.

2.00 у.е.

2.00 у.е.

1.50 у.е.

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

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

<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’, он не представляет большой ценности и не влияет на улучшение доступности таблицы.

Список похожих статей