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

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

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

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

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

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

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

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

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

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

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

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

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