Доступные таблицы с нейросетью готовят в два этапа: сначала описывают смысл строк, столбцов и заголовков, затем проверяют полученную HTML-разметку на готовой странице. Красивой сетки недостаточно. Важно, чтобы читатель со скринридером мог понять, к чему относится отдельная ячейка. Ниже — учебное задание для редактора корпоративной базы знаний и разработчика, который принимает результат.
Что именно нужно сделать доступным?
Представьте условную страницу курса. В таблице стоят названия модулей, форматы занятий и материалы для подготовки. Визуально заголовки выделены жирным, но в коде все ячейки оформлены одинаково. Человек видит колонки; программе чтения с экрана нужны сведения об их структуре.
Это задача семантики, а не украшения таблицы.
Начните с одной простой таблицы.
Руководство W3C по таблицам объясняет: заголовки и ячейки данных должны быть размечены и связаны так, чтобы вспомогательные технологии могли передать контекст. Для заголовков используют элемент th, для данных — td. Одного визуального выделения недостаточно.
Рассматриваем обычную таблицу данных в HTML-странице учебного материала. Не обещаем соответствия всего сайта WCAG и не переносим правила автоматически в Word или PDF: у этих форматов свои средства и проверки. Не используем таблицу для раскладки страницы. Предлагаемый ниже порядок работы с ИИ — редакционная рекомендация, а не методика W3C по применению нейросетей.
Если исходник — изображение таблицы, сначала получите проверенные значения по порядку распознавания сканов. Здесь считаем, что значения уже сверены. Alt-текст изображения решает другую задачу: короткое описание картинки не создаёт связи между ячейками HTML-таблицы.
Расскажите, чему хотите научить команду. Обсудим задачи и формат обучения.
Опишите смысл таблицы до запроса к ИИ
Начните с вопроса, на который должна отвечать таблица. Для условного учебного примера это «Как подготовиться к каждому модулю?». Название «Данные» такой цели не передаёт. Выберите понятную подпись и сохраните её вместе с исходными значениями.
Затем определите роль каждой колонки. В нашем упражнении названия модулей — обычные значения первого столбца; отдельных заголовков строк нет. Все три заголовка находятся в верхней строке и относятся к столбцам. Это намеренно простая структура без объединённых ячеек.
| Модуль | Формат | Подготовка |
|---|---|---|
| Проверка ответа | Практикум | Прочитать учебную инструкцию |
| Работа с таблицей | Разбор | Открыть учебный набор данных |
Все названия и действия в примере условные. Это не расписание AURMIND и не описание оплаченной программы.
Зафиксируйте исходные данные отдельно от черновика разметки. Если нейросеть переименовала модуль или добавила срок подготовки, сравнение с этой версией обнаружит изменение. Не разрешайте «улучшать» содержание вместе с оформлением: иначе станет непонятно, что редактор уже согласовал.
Для работы передавайте только разрешённые материалы. Учебной таблицы достаточно, чтобы отработать структуру; данные сотрудников или клиентов для этого не нужны. Правила передачи рабочих файлов выбирают по требованиям организации и конкретного инструмента.
Как поручить нейросети разметку простой таблицы?
Сформулируйте задачу через ожидаемый результат и ограничения. Не просите «сделать полностью доступный документ» одним запросом. Для нашего условного примера подходит такое поручение:
Подготовь черновик HTML-таблицы по переданным данным. Подпись: «Подготовка к учебным модулям». Первая строка содержит заголовки столбцов «Модуль», «Формат», «Подготовка». Заголовков строк и объединённых ячеек нет. Используй caption для подписи, th со scope="col" для заголовков и td для данных. Сохрани все значения дословно. Не добавляй CSS, скрипты, новые сроки и сведения. После кода перечисли принятые решения и вопросы. Не утверждай, что проверил страницу скринридером.
Это шаблон задания, а не обещание, что любой инструмент выполнит его без ошибок. Если сервис не выдаёт код, можно получить перечень решений и передать его разработчику. В любом случае нужна проверка результата человеком.
В примерах W3C с одной строкой заголовков показано направление связей через scope="col". Для неоднозначных данных и более крупных таблиц оно помогает явно определить, к каким ячейкам относится заголовок. Не превращайте это в правило «добавить scope ко всему»: атрибут ставят на заголовки с учётом их роли.
Черновик для нашего примера выглядит так:
<table>
<caption>Подготовка к учебным модулям</caption>
<thead>
<tr>
<th scope="col">Модуль</th>
<th scope="col">Формат</th>
<th scope="col">Подготовка</th>
</tr>
</thead>
<tbody>
<tr>
<td>Проверка ответа</td>
<td>Практикум</td>
<td>Прочитать учебную инструкцию</td>
</tr>
<tr>
<td>Работа с таблицей</td>
<td>Разбор</td>
<td>Открыть учебный набор данных</td>
</tr>
</tbody>
</table>Проверяйте структуру вместе с данными. Здесь три заголовка столбцов и две строки, в каждой по три значения. Подпись находится внутри table. Название модуля осталось ячейкой данных — таково условие упражнения. Если в вашей реальной таблице оно должно служить заголовком строки, нужна другая карта ролей и соответствующая разметка.
Не вставляйте неизвестный сгенерированный код в рабочую CMS без проверки разработчиком. Для упражнения используйте тестовую страницу.
Схема выделяет две разные связи: подпись «Подготовка к учебным модулям» относится ко всей таблице, а заголовок «Формат» — к значениям своего столбца. Жирное начертание само по себе эти отношения не задаёт.
Подпись и описание структуры решают разные задачи
По руководству W3C о caption и summary, подпись помогает назвать и найти таблицу. Краткое пояснение сложной структуры помогает ориентироваться внутри неё. При этом подписи и пояснения не требуются в каждом случае для выполнения WCAG; их необходимость зависит от содержания.
В нашем примере достаточно короткой подписи. Повторять «В таблице три столбца и две строки» только ради второго текста не нужно: такое пояснение мало помогает выбрать нужный модуль. Для сложной матрицы полезнее объяснить, как сгруппированы данные и где искать определённую категорию.
Не путайте пояснение структуры с пересказом всех значений.
Если ИИ предложил подпись «Учебные материалы», уточните, что таблица показывает подготовку по модулям. Если предложил длинный абзац с каждым значением, попросите выделить только назначение таблицы. Содержательные правила курса нельзя прятать в служебное пояснение или придумывать ради удобной структуры.
Факт. В W3C различают название таблицы и ориентирование в сложном расположении данных. Пример подписи выше создан для этой статьи; он не взят из реального курса.
Когда простого шаблона уже недостаточно?
У таблицы могут быть заголовки и строк, и столбцов, объединённые группы или несколько уровней. Обзор W3C разбирает такие случаи отдельно: для групп используются соответствующие области scope, а для сложных связей могут понадобиться id и headers. Наличие этих атрибутов ещё не доказывает правильность конкретной таблицы.
Остановите применение нашего шаблона, если для одной ячейки приходится называть несколько групп заголовков. Сначала составьте карту: какие именно заголовки объясняют каждое значение. Затем передайте её разработчику. Не просите нейросеть молча «угадывать структуру» по цвету и расположению.
Редакционный вариант — разделить большую таблицу на несколько простых. Он подходит только тогда, когда сохраняются смысл, единицы измерения и важные сравнения. Согласуйте изменение с владельцем материала: разделение может сделать общую связь менее заметной. Это выбор подачи, а не универсальное требование стандарта.
Условный пример: если модули сгруппированы по ролям сотрудников, нельзя просто удалить строку с названием роли. После разделения каждая новая таблица должна сохранить своё назначение и принадлежность группе. Иначе понятный на вид документ изменит исходную информацию.
Проверяйте страницу после сохранения в CMS
Сохранённый ответ модели — ещё не итоговый материал. Откройте тестовую страницу после вставки и проверьте фактический HTML. Сравните подпись, типы ячеек и направления заголовков с согласованной картой. Отдельно сверьте каждое значение с исходником.
W3C предупреждает, что при преобразовании между форматами разметка таблиц нередко теряется. Поэтому проверка нужна в том формате и месте, где таблицу будет читать сотрудник. Удачный черновик HTML не подтверждает качество экспортированного PDF.
Передайте проверяющему конкретное задание: найти таблицу по подписи, перейти к значению «Практикум» и определить его столбец. Для нашего примера ожидаемый контекст — «Формат». Укажите использованные браузер и скринридер, фактическое поведение и оставшиеся вопросы. Проверку должен выполнять человек, знакомый с выбранным средством; эта статья не задаёт команды навигации для всех программ.
Одного удачного перехода недостаточно для приёмки всей страницы.
| Что проверяют | С чем сравнивают | Что записывают |
|---|---|---|
| Все значения | Согласованный исходник | Пропуски и изменения |
| Подпись | Назначение таблицы | Совпадает ли нужный смысл |
| Заголовки | Карта ролей ячеек | Реальные th и их области |
| Чтение таблицы | Задание на целевой странице | Среда, поведение, ошибки |
| Сохранение и экспорт | Каждый используемый формат | Какие версии проверены |
Запись о проверке передают вместе с материалом.
Не записывайте «доступность подтверждена», если проверили только наличие th. Лучше назвать объём точно: «Сверены значения и разметка простой таблицы; чтение в выбранной среде ещё не проверено». Получатель увидит границы результата и сможет назначить следующий этап.
Как провести упражнение с командой?
Дайте участнику исходную учебную таблицу и намеренно плохой вариант: все ячейки размечены как данные, название таблицы стоит обычным абзацем. Попросите сначала описать проблему своими словами, затем составить запрос к ИИ и предложить исправленный HTML. Эталоном служат согласованные значения и карта заголовков, а не уверенность ответа модели.
Проверяющий должен объяснить каждое замечание. «Сделай доступнее» не указывает на ошибку; «ячейка с названием Формат осталась td вместо заголовка столбца» даёт проверяемую правку. После исправления повторите проверку в конечной странице.
Мнение. Если команда готовит HTML-материалы в CMS, упражнение полезно проводить вдвоём: редактор отвечает за смысл данных, разработчик за реализацию. Это рекомендация по распределению работы, а не результат измерения эффективности обучения.
Для обсуждения корпоративного занятия выберите способ связи и опишите задачу команды: какие учебные документы вы готовите, кто переносит их в CMS и кто проверяет готовую версию. Передавать рабочие файлы заранее не требуется.
Частые вопросы
Можно ли заменить таблицу картинкой и добавить alt?
В этой задаче нужен доступ к отдельным значениям и их заголовкам. Картинка с кратким alt не создаёт такую HTML-структуру. Если изображение всё же необходимо, его текстовую альтернативу и доступное представление данных проектируют отдельно.
Нужно ли добавлять scope каждой ячейке?
Нет. В рассмотренном шаблоне scope стоит у заголовков столбцов. Обычные значения остаются td. Для другой структуры сначала определяют роли ячеек, затем выбирают разметку.
Доказывает ли этот пример соответствие WCAG?
Нет. Он показывает один ограниченный приём для простой HTML-таблицы. Доступность целой страницы и других форматов требует проверки всех применимых требований и реального поведения.
