Просту таблицю даних із одним рядком заголовків стовпців угорі зробити відносно легко доступною. Справжній біль починається зі складними таблицями — із заголовками в стовпцях і рядках, об’єднаними клітинками або підсумковими рядками. У цій статті пояснюється, як додавати теги до заголовків таблиці, щоб програма зчитування з екрана «розуміла» для кожної комірки, які заголовки до неї застосовуються, не втрачаючи контексту.
Коротко — що охоплює цей посібник
Чим TH відрізняється від TD
У таблиці HTML або PDF-файлі з тегами кожна клітинка має один із двох типів ролі: TH (Заголовок таблиці) або TD (Дані таблиці — звичайна клітинка даних). Різниця не обов’язково візуальна — клітинка заголовка та клітинка даних можуть виглядати однаковими стилями — вона семантична: TH повідомляє програмі зчитування з екрана: «це заголовок, який пояснює, що означають дані під ним або поруч». Без правильного додавання тегів програма зчитування з екрана переміщується рядок за рядком таблиці, ніби всі клітинки рівні, і легко повністю втратити відстеження того, які дані до якої категорії належать.
Коли масштабу достатньо, і коли вам потрібно більше
Для більшості таблиць ви додаєте a область атрибут для кожної клітинки TH, щоб вказати, чи є це заголовок стовпця (scope="col") або заголовок рядка (scope="row"). Коли програма зчитування з екрана досягає комірки даних, вона автоматично оголошує відповідний заголовок стовпця та заголовок рядка, тож користувач почує, наприклад, «1200 — Продажі, Q1» замість окремого «1200».
Для особливо складних таблиць із більш ніж двома рівнями заголовків (наприклад, суперзаголовок, який групує кілька підстовпців), одного обсягу не завжди достатньо. У таких випадках використовуйте пару атрибутів ідентифікатор і заголовки: надайте кожній комірці заголовка унікальний ідентифікатор, а в кожному списку комірок даних, в атрибуті заголовків, усі відповідні ідентифікатори заголовків. Цей метод є більш гнучким, але також більш складним і схильним до помилок — зарезервуйте його для випадків, коли він дійсно потрібен.
scope="col"і заголовки рядків ("Q1," "Q2," "Q3") з scope="row" — тому кожна комірка даних пов’язана з двома відповідними їй заголовками.Підсумкові рядки та кілька заголовків
Підсумковий рядок унизу таблиці («Усього», «Середнє») сам по собі є свого роду заголовком — зазвичай доцільно позначати саму комірку підсумку як TH із scope="row", щоб програма зчитування з екрана відрізняла її від звичайного рядка даних. Подібним чином таблиця з надзаголовком, який групує кілька стовпців (наприклад, «2026 Продажі», що охоплює «Q1,» «Q2»), вимагає правильного використання colspan атрибут разом із областю дії, тому ієрархічне групування зберігається під час читання вголос.
💡 Практична порада
Якщо таблиця здається надто складною для правильного додавання тегів (більше двох рівнів заголовків, кілька об’єднань), інколи найпростішим і найдоступнішим рішенням є розбити її на кілька простіших таблиць або додати поряд із нею простий текстовий підсумок.
Як це виглядає на практиці у Word і PDF
У Word використання стандартного інструменту «Вставити ▸ Таблицю» та прапорець «Рядок заголовка» у «Дизайн таблиці» створює правильну основу, яка в більшості випадків автоматично експортується у PDF як TH. В Acrobat після експорту з Word і запуску перевірки доступності варто відкрити дерево тегів і підтвердити, що комірки заголовків справді позначені як TH, а не як звичайний TD — це поширена помилка експорту, яку легко не помітити.
Маєте таблиці даних у документах, які ніколи не перевірялися?
Наш інструмент визначає таблиці з відсутніми або неправильними заголовками в кожному файлі PDF на вашому сайті.
Відскануйте свій сайт безкоштовно ←