HTML Academy · Урок

Доступность таблиц: scope, summary и caption

Добавляйте подписи и атрибуты scope для поддержки программ чтения с экрана

«Доступность таблиц: scope, summary и caption» — бесплатный урок HTML Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Почему доступность таблиц важна

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

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

Элемент caption

<caption> задаёт видимый заголовок таблицы:

<table>
  <caption>Q4 2024 Product Sales by Region</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>
<!-- caption is the first child of table -->
<!-- Screen readers announce it when entering the table -->
<!-- Helps all users understand the table's purpose at a glance -->

Стилизация caption

Стилизуйте заголовок и задавайте его положение с помощью CSS:

caption {
  caption-side: bottom;  /* or top (default) */
  font-style: italic;
  font-size: 0.875rem;
  color: #666;
  text-align: left;
  padding: 0.5rem 0;
}

Атрибут scope у th

Атрибут scope сообщает программам чтения с экрана, к каким ячейкам относится заголовок:

<thead>
  <tr>
    <th scope="col">Name</th>      <!-- header for a column -->
    <th scope="col">Score</th>
    <th scope="col">Grade</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">Alice</th>    <!-- header for a row -->
    <td>95</td>
    <td>A</td>
  </tr>
</tbody>

Значения scope

Значения атрибута scope:

col — заголовок относится к ячейкам того же столбца
row — заголовок относится к ячейкам той же строки
colgroup — заголовок относится к ячейкам группы столбцов
rowgroup — заголовок относится к ячейкам группы строк (tbody/thead)

scope для сложных заголовков

В заголовках, объединяющих ячейки, используется scope со значением colgroup или rowgroup:

<thead>
  <tr>
    <th rowspan="2" scope="col">Name</th>
    <th colspan="2" scope="colgroup">2024</th>   <!-- colgroup -->
  </tr>
  <tr>
    <th scope="col">Q1</th>
    <th scope="col">Q2</th>
  </tr>
</thead>

Атрибут headers у td

Для очень сложных таблиц используйте headers, чтобы явно связать ячейки с их заголовками:

<thead>
  <tr>
    <th id="hname">Name</th>
    <th id="hq1">Q1</th>
    <th id="hq2">Q2</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th id="ralice" headers="hname">Alice</th>
    <td headers="hq1 ralice">95</td>
    <td headers="hq2 ralice">88</td>
  </tr>
</tbody>

Когда использовать scope, а когда headers

Рекомендации:

Простые таблицы с заголовками в одной строке → используйте scope="col" и scope="row"
Сложные заголовки с объединёнными ячейками → используйте атрибут headers со ссылками на ID
WCAG 1.3.1 требует программно связывать заголовки таблицы с ячейками данных

aria-label у table

Если визуально отображать caption нежелательно, используйте aria-label:

<!-- caption with visually-hidden class -->
<table aria-label="Q4 2024 Product Sales by Region">
  ...
</table>
<!-- Or use aria-labelledby to reference a heading -->
<h2 id="table-title">Sales Data</h2>
<table aria-labelledby="table-title">...</table>

Проверка доступности таблиц

Как проверить доступность таблицы:

Используйте панель таблиц в программе чтения с экрана (VoiceOver, NVDA)
Установите расширение браузера axe DevTools
Запустите pa11y CLI для URL своей страницы
Валидатор разметки W3C обнаруживает отсутствие caption

Атрибут summary (устарел)

Атрибут summary использовался программами чтения с экрана для сложных таблиц, но теперь устарел в HTML5:

<!-- Old HTML 4.01 — do not use: -->
<table summary="This table shows quarterly sales...">

<!-- Modern HTML5 replacement: -->
<table>
  <caption>This table shows quarterly sales...</caption>
</table>
<!-- Or: aria-describedby to a paragraph -->

Проверка доступности таблицы

Список проверок доступности таблиц данных:

Используйте <caption>, чтобы подписать таблицу
Используйте <th> для всех ячеек заголовков
Добавляйте scope ко всем элементам <th>
Используйте <thead>, <tbody>, <tfoot> для создания структуры
Для сложных таблиц используйте id + headers

Проверка знаний

Какое значение scope следует использовать для th, являющегося заголовком всего столбца?

Повторение: доступность таблиц

Основные требования к доступным таблицам:

<caption> — видимый заголовок таблицы, который объявляют программы чтения с экрана
scope="col" — заголовок столбца
scope="row" — заголовок строки
scope="colgroup/rowgroup" — заголовки, объединяющие ячейки
id + headers — для сложных многоуровневых заголовков
Проверяйте таблицы с помощью axe, pa11y или VoiceOver

Часто задаваемые вопросы

Урок «Доступность таблиц: scope, summary и caption» бесплатный?

Да — полный текст урока «Доступность таблиц: scope, summary и caption» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Доступность таблиц: scope, summary и caption»?

Добавляйте подписи и атрибуты scope для поддержки программ чтения с экрана Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Доступность таблиц: scope, summary и caption»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

table, tr, td и th
Структура thead, tbody и tfoot
colspan и rowspan для объединения ячеек
Доступность таблиц: scope, summary и caption

← Назад к HTML Academy