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

Печать статьи

Читать журнал

Скачать журнал

Автор статьи: Наталья Щеголева ©

Сайт Автора: www.seo.su

E-mail Автора: natasha@regioninfo.ru

Дата публикации: 25.04.2006

Сложные таблицы данных

Для таблиц, которые имеют два и более уровней заголовков столбцов и строк используется специальная разметка, сопоставляющая заголовочные ячейки с информационными ячейками. Например, <thead>, <tbody>, <tfood> применяют для группировки строк, <col> и <colgroup> используются для группировки столбцов, а атрибуты ‘axis’, ‘scope’, ‘headers’ – для описания более сложных отношений.

Норматив доступности контента 5.2

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

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

Для улучшения доступности таблиц с несколькими уровнями заголовков используются следующие элементы разметки:

‘ id’ и ‘headers’ для того, чтобы связать ячейки с соответствующим заголовком;
‘scope’ и ‘col’ (и ‘colgroup’) и/или ‘row’ (и ‘rowgroup’) для объединения ячеек в одной строке и столбце.

Для проверки доступности таблиц на веб-сайтах опытных пользователей «скрин ридеров» попросили найти в таблице конкретную информацию. В большинстве случаев это оказалось очень трудным заданием, что указало на недоступность таблиц. Однако при корректном использовании элементов ‘id’ и ‘headers’ доступность многих таблиц повышается.

В последнее время все чаще обращаются к элементу ‘scope’ , однако, как утверждает автор, это не играет большой роли.

Элементы ‘id’ и ‘headers’

HTML 4 представил атрибут ‘headers’ для тега <td>. Этот атрибут используется вместе с атрибутом ‘id’ внутри тега заголовочной ячейки <th> для связи ячейки или ячеек с заголовком или заголовками.

Эти атрибуты использовались для повышения доступности приведенной ниже таблицы:

Цены на ввозимые и отечественные яблоки и апельсины в Сиднее и Мельбурне
	Ввозимые		Отечественные
	Апельсины	Яблоки	Апельсины	Яблоки
Сидней
Опт	1.00 у.е.	1.25 у.е.	1.20 у.е.	1.00 у.е.
Розница	2.00 у.е.	3.00 у.е.	1.80 у.е.	1.60 у.е.
Мельбурн
Опт	1.20 у.е.	1.30 у.е.	1.00 у.е.	0.80 у.е.
Розница	1.60 у.е.	2.00 у.е.	2.00 у.е.	1.50 у.е.

ВОПРОС: Сколько условных единиц составляет оптовая цена на ввозимые яблоки в Сиднее?

Использование атрибутов ‘id’ и ‘headers’ при разметке этой странице гарантирует то, что большинство пользователей «скрин ридеров» найдут ответ на поставленный вопрос. Ниже приведен фрагмент разметки таблицы с этими атрибутами :

<table border ="1" summary ="Цены на ввозимые и отечественные яблоки и апельсины в Сиднее и Мельбурне. Два уровня заголовочных ячеек.">
<caption>
Цены на ввозимые и отечественные яблоки и апельсины в Сиднее и Мельбурне

   </caption>
   <thead>
      <tr>
         <td></td>
         <th colspan="2" id="ввозимые"> Ввозимые </th>
         <th colspan="2" id="Ввозимые"> Ввозимые </th>
      </tr>
      <tr>
         <td></td>
         <th id="апельсины - ввоз"> Апельсины </th>
         <th id="яблоки - ввоз"> Яблоки </th>
         <th id="апельсины - отеч"> Апельсины </th>
         <th id="яблоки - отеч"> Яблоки </th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th id="sydney" colspan="5"> Сидней </th>
      </tr>
      <tr>
         <th headers="сидней" id="опт - сидней"> Опт </th>
         <td headers="ввозимые апельсины - ввоз сидней опт - сидней">1.00 у.е.</td>
         <td headers="ввозимые яблоки -ввоз сидней опт -сидней">1.25 у.е.</td>
         <td headers="отечественные апельсины - отеч сидней опт - сидней">1.20 у.е.</td>
         <td headers="отечественные яблоки - отеч сидней опт - сидней">1.00 у.е.</td>
      </tr>
      <tr>
         <th headers="сидней" id="розница - сидней"> Розница </th> …

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

Например, если искомой ячейкой является ячейка «1.25 у.е.», JAWS «прочтет информацию данной ячейки» следующим образом:

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

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