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

Таблицы как средство представления информации в HTML (расписания, цены, меры, параметры и др.) используются с 1994 года с появлением HTML 2.0

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

К тому времени, когда появился HTML 3.2, основное предназначение таблиц сместилось с контроля способа представления информации на контроль за видом страницы.

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

Теперь способ представления и элементы форматирования веб-страницы определяются и контролируются с помощью CSS.

Эта статья посвящена рассмотрению следующих вопросов:

• Как улучшить доступность таблицы данных?
• Описание эффективных методов повышения доступности, используемых автором Робертом Хадсоном для разметки сложных таблиц данных.

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

В поисках информации

В процессе изучения таблицы выделяют три этапа:

1. Обзор таблицы, определение ее основной сути (расписание автобусных маршрутов или прайс-лист на овощи).

2. Будет ли эта таблица полезной для вас? (цены на горошек в Дарвине)

3. Детальное изучение информации (оптовые цены на горошек в Дарвине)

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

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

ОТВЕТ: Для людей со стопроцентным зрением 1.25 у.е.

А как же люди со слабым зрением, которые полагаются на специальные программы (screen reader) для нахождения необходимой информации с помощью Web?

Они также могут получить необходимые сведения, если таблица хорошо продумана и соответствует Web Content Accessibility Guidelines (нормативы доступности контента).

«Скрин ридеры» (screen reader) и таблицы

Вначале необходимо разъяснить, как «скрин ридеры» считывают информацию из таблиц данных.

В противоположность своему названию, «скрин ридеры» не считывают информацию с экрана. В прошлом многие «скрин ридеры», например, PW Webspeak, именно считывали информацию слева направо строчку за строчкой, начиная с левого верхнего угла и заканчивая нижним правым.

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

Пользователи JAWS извлекают информацию из таблицы данных следующим путем:

• Таблица прочитывается строчка за строчкой либо последовательно, либо отдельные секции, выбранные вручную.
• При использовании клавиш Atl+Ctrl+Left Arrow (либо Atl+Ctrl+Right Arrow) пользователь перемещает курсор по рядам таблицы и программа JAWS прочитывает вслух заголовок ячейки и ее содержимое. Аналогично может осуществляться прочтение информации сверху вниз.
• Команда Alt+Ctrl+Num Pad 5 фокусирует внимание программы на определенной ячейке, JAWS предоставит пользователю всю информацию, имеющую отношение к выбранной ячейке: ее содержимое и, при правильной кодировке таблицы, заголовок соответствующего столбца и колонки.

Это и объясняет, как пользователи с ослабленным зрением получают информацию из таблиц.

Распознавание таблицы

У каждой таблицы есть заголовок или небольшое описание, показывающе, что перед вами таблица, как в примере: «Цены на овощи в Дарвине и Хобарте». Также, таблица устроена так, что уже с первого взгляда не трудно понять, как она функционирует (например, название продукта вверху, названия городов расположены сверху вниз в левой колонке).

Для повышения доступности к таблице данных и ориентации «скрин ридеров» используются два HTML-тега.

Тег <CAPTION> для обозначения заголовка таблицы

Название таблицы обычно прописывается вне самой таблицы как отдельный заголовок <h> или параграф <p>. Иногда оно прописывается в первой строке таблицы тегом <tr> или в первой ячейке с помощью <td>. Такие подходы к написанию заголовка таблицы могут вызвать проблемы их прочтения у пользователей вспомогательных технологий.

Использование элемента <caption> - наиболее доступный метод записи заголовка таблицы. По умолчанию этот тег помещает заголовок по центру сразу над таблицей. Однако, часто приходится применять CSS для того, чтобы изменить стиль заголовка и его положение на странице. Например, заголовок можно расположить под таблицей. Как это делается в научных публикациях.

При создании таблицы тег <caption> ставится сразу после элемента <table> и перед всем остальным текстом разметки.

<summary> для обозначения основной идеи таблицы

<summary> не является автономным элементом, как <caption> ,а представляет собой атрибут для элемента <table>. Содержимое атрибута <summary> не выдается на экран графическими браузерами, но распознается «скрин ридерами» и программами, которые поддерживают шрифт Брайля для того, чтобы помочь пользователю понять таблицу.

Атрибут <summary> используется для того, чтобы передать суть таблицы и ее общую структуру. Многие вспомогательные технологии начинают работу с таблицей с прочтения <summary>, это обеспечивает ее правильное истолкование и помогает в использовании таблицы. При работе с более сложными таблицами, необходимость в атрибуте <summary> возрастает.

Ниже приводится пример разметки таблицы «Цены на овощи в Дарвине и Хобарте»:

<table summary ="Оптовые и розничные цены на овощи в Дарвине и Хобарте. Два уровня заголовков.">
<caption> Цены на овощи в Дарвине и Хобарте </caption>
…

Простые таблицы данных

Для таблицы необходимо определить строчку и столбец. Для этого в HTML -разметке используется такие теги как <td> и <th>. С помощью <td> определяются ячейки таблицы, с помощью <th> - заголовки.

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

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

К сожалению, большинство разработчиков применяет <td> для обозначения ячеек, содержащих и заголовки, и саму информацию. Это не представляет проблемы для пользователей с хорошим зрением, т.к. им не трудно отличить ячейку с заголовком от ячейки с информацией.

Что касается вспомогательных технологий, не все из них могут различить эти ячейки и представят любое содержание тега <td> как информацию. В результате у пользователей «скрин ридеров» вызовет трудность соотнесение информации в центральных ячейках таблицы с заголовком соответствующей строки и столбца.

HTML -разметка предлагает простое и доступное решение этой проблемы. Просто нужно всегда применять тег <th> для обозначения заголовка столбца или строки в таблице данных. (NB : никогда не используйте тег <th> в таблицах форматирования - Норматив доступности контента 5.4)

В следующей таблице «Цены на желтую сливу и персики» <th> используется для обозначения заголовков.

<table border ="1" summary ="Таблица «Цены на желтую сливу и персики»: первая строка и первый столбец являются заголовками">
    <caption>Цены на желтую сливу и персики в Сиднее </caption>
    <tr>
       <td></td>
       <th> Желтая слива </th>
       <th>Персики</th>
    </tr>
    <tr>
       <th>Опт</ th>
       <td1.00 у.е. </td>
       <td >1.50 у.е. </td>
    </tr>
    <tr>
       <th>Розница</th>
       <td>2.00 у.е. </td>
       <td>2.50 у.е. </td>
    </tr>
</table>

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

Если пользователю необходимо узнать оптовую цену на сливу, JAWS огласит информацию, прописанную в соответствующей ячейке, примерно так: 3-я колонка, 2-й ряд, оптовая цена на желтую сливу, одна целая ноль десятых условной единицы.

Аббревиатура

Атрибут <abbr> используется как аббревиатура для больших заголовков, чтобы не повторять их каждый раз. В примере атрибут <abbr > включен в тег <th>, который используется для обозначения заголовков колонки. Так в первый раз «скрин ридер» прочтет заголовок «желтая слива» целиком, а каждый последующий раз только аббревиатуру «слива».

<table border ="1" summary =" Цены на желтую сливу и персики »: первая строка и первый столбец являются заголовками">
    <caption> Цены на желтую сливу и персики в Сиднее </caption>
    <tr>
       <td></td>
       <th abbr=" plums">Желтая слива</ th>
    </tr>
    <tr>
       <th>Опт</ th>
       <td>1.00 у.е.</td>
       <td>1.50 у.е.</td>
    </tr>
    <tr>
       <th>Розница</th>
       <td>2.00 у.е.</td>
       <td>2.50 у.е.</td>
    </tr>
</table>

Элементы <thead> , <tbody> и <tfoot>

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

• <thead> - дескриптор заголовочного раздела таблицы;
• <tfoot> - дескриптор раздела колонтитула;

<tbody> - дескриптор тела таблицы.

С помощью этих элементов можно группировать строки таблицы и представлять их в трех разных секциях.

<thead> и <tfoot> используются для обозначения заголовочной строки вверху либо внизу таблицы. Это необходимо для больших таблиц, которые занимают более одной страницы, для того, чтобы помочь пользователю ориентироваться в ее ячейках. Также при соответствующей поддержке браузера, использование этих элементов обеспечит возможность автономной прокрутки тела таблицы, когда заголовок остается на экране. В будущем это станет весьма полезным для пользователей портативных приборов, оснащенных небольшими экранами.

Используя <thead> и <tfoot>, необходимо применить и <tbody> для обозначения тела таблицы, т.е. ячеек, содержащих фактическую информацию. В сущности, для одной таблицы можно прописать больше одного элемента <tbody>.

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

Для таблиц, которые имеют два и более уровней заголовков столбцов и строк используется специальная разметка, сопоставляющая заголовочные ячейки с информационными ячейками. Например, <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> для связи ячейки или ячеек с заголовком или заголовками.

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

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

Использование атрибутов ‘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 «прочтет информацию данной ячейки» следующим образом:

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

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

Следующая таблица «Цены на вишню и абрикосы» состоит из трех уровней заголовков столбцов и двух уровней заголовков строк, при ее разметке применялись атрибуты ‘id’ и ‘headers’

В фрагменте разметки таблицы элементы ‘id ’и ‘headers’ выделены жирным шрифтом:

<thead>
    <tr>
       <td></td>
       <th id ="ввоз" colspan ="3">Ввозимые</th>
       <th id ="отеч" colspan ="3">Отечественные</th>
    </tr>
    <tr>
       <td></td>
       <th headers ="ввоз" id =" imp -абр">Абрикосы</th>
       <th headers =" ввоз" id =" ввоз -виш" colspan ="2">Вишня</th>
       <th headers ="отеч" id ="отеч- apr ">Абрикосы</th>
       <th headers ="отеч" id ="отеч- che " colspan ="2">Вишня</th>
    </tr>
    <tr>
       <td></td>
       <td></td>
       <th headers =" ввоз ввоз-виш" id =" ввоз -виш- a сорт" > A сорт</th>
       <th headers =" ввоз ввоз-виш" id =" ввоз-виш-бсорт">Б сорт</th>
       <td></td>
       <th headers ="отеч отеч-виш" id ="отеч-виш- a сорт"> A сорт</th>
       <th headers ="отеч отеч-виш" id ="отеч-виш-бсорт">Б сорт</ th>
    </tr>
</thead>
... продолжение разметки...

<tbody>
    <tr>
       < th id ="перт" colspan ="7">Перт</th>
       </tr><tr>
       <th headers ="перт" id ="перт-опт" >Опт</th>
       <td headers ="ввоз ввоз-абр перт перт-опт">1.00 у.е.</td>
       <td headers =" ввоз ввоз -виш ввоз -виш- a сорт перт перт-опт">9.00 у.е.</td>
       < td headers ="ввоз ввоз-виш ввоз-виш- b сорт перт перт-опт"> 6.00 у.е.</td>
       <td headers ="отеч отеч-абр перт перт-опт">1.20 у.е.</td>
... продолжение разметки...

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

Если искомой ячейкой является ячейка «9 у.е.», JAWS «прочтет информацию данной ячейки» так:

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

Отдавайте предпочтение простым таблицам

Как уже отмечалось, многоуровневые заголовки столбцов могут дезориентировать пользователей «скрин ридеров». Например, выше приведенную таблицу JAWS прочтет следующим образом:

«таблица из 7 столбцов и 9 строк (далее общая содержание таблицы и т.п.)»

Строки с заголовочными ячейками будут представлены так:

Три столбца строка первая…

Пять столбцов строка вторая…

Семь столбцов строка третья…

Нет указания на то, какие строки содержат заголовочные ячейки. Также не совсем понятно, из скольких столбцов состоит таблица. Применение атрибута ‘ headers ’ в разметке таблицы позволит вспомогательной программе различать заголовочные ячейки при прочтении информации.

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

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

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

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

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