Простую таблицу данных с одной строкой заголовков столбцов вверху сделать доступной относительно просто. Настоящая боль начинается со сложных таблиц — с заголовками как в столбцах, так и в строках, объединенных ячейках или итоговых строках. В этой статье объясняется, как пометить заголовки таблиц тегами, чтобы программа чтения с экрана «понимала» для каждой ячейки, какие заголовки к ней применяются, без потери контекста.
Короче — о чем идет речь в этом руководстве
Чем TH отличается от TD
В HTML-таблице или PDF-файле с тегами каждая ячейка имеет один из двух типов роли: TH (заголовок таблицы) или TD (данные таблицы — обычная ячейка данных). Разница не обязательно визуальная — ячейка заголовка и ячейка данных могут выглядеть одинаково оформленными — она семантическая: TH сообщает программе чтения с экрана, что «это заголовок, который объясняет, что означают данные ниже или рядом с ним». Без правильной разметки программа чтения с экрана перемещается по таблице строка за строкой, как если бы все ячейки были одинаковыми, и легко полностью потерять представление о том, какие данные к какой категории принадлежат.
Когда возможностей достаточно и когда нужно больше
Для большинства таблиц вы добавляетеобластьатрибут каждой ячейки TH, чтобы указать, является ли это заголовком столбца (
Атрибутscope="col") или заголовок строки (scope="row"). Когда программа чтения с экрана достигает ячейки данных, она автоматически объявляет заголовок соответствующего столбца и заголовок строки, поэтому пользователь слышит, например, «1200 — Продажи, Q1», а не просто изолированное «1200».
Для особо сложных таблиц с более чем двумя уровнями заголовков (например, суперзаголовок, группирующий несколько подстолбцов), одной области действия не всегда достаточно. В этих случаях используйте пару атрибутов id и headers: дайте каждой ячейке заголовка уникальный идентификатор, а в каждом списке ячеек данных в атрибуте headers — все соответствующие ей идентификаторы заголовков. Этот метод более гибкий, но также более сложный и подвержен ошибкам — оставьте его для случаев, когда он действительно необходим.
scope="col"и заголовки строк («Q1», «Q2», «Q3») сscope="row"— поэтому каждая ячейка данных связана с двумя соответствующими ей заголовками.Сводные строки и несколько заголовков
Сводная строка в нижней части таблицы («Итого», «Среднее») сама по себе является своего рода заголовком — обычно уместно пометить саму ячейку итога как TH с помощью параметраscope="row", чтобы средство чтения с экрана отличало ее от обычной строки данных. Аналогично, таблица с суперзаголовком, группирующим несколько столбцов (например, «Продажи в 2026 году», охватывающие «Q1», «Q2»), требует правильного использованияcolspanвместе с областью действия, поэтому иерархическая группировка сохраняется и при чтении вслух.
💡 Практический совет
Если таблица кажется слишком сложной для правильной маркировки (более двух уровней заголовков, множественные слияния), иногда самое простое и доступное решение — разбить ее на несколько более простых таблиц или добавить рядом с ней сводку в виде простого текста.
Как это выглядит на практике в Word и PDF
В Word с помощью стандартного инструмента «Вставка ▸ Таблица» и проверки «Строка заголовка» в «Дизайн таблицы» создается правильная основа, которая в большинстве случаев автоматически экспортируется в PDF как TH. В Acrobat после экспорта из Word и выполнения проверки доступности стоит открыть дерево тегов и убедиться, что ячейки заголовка действительно были помечены как TH, а не как обычный TD — это распространенная ошибка экспорта, которую легко пропустить.
Есть ли таблицы данных в документах, которые никогда не тестировались?
Наш инструмент идентифицирует таблицы с отсутствующими или неправильными заголовками в каждом PDF-файле на вашем сайте.
Сканируйте ваш сайт бесплатно ←