Правильные заголовки строк и столбцов
Связывайте каждую ячейку с нужными заголовками.
«Правильные заголовки строк и столбцов» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.
У большинства таблиц два типа заголовков
В настоящих данных обычно есть заголовки сверху и сбоку. Каждая ячейка данных находится на пересечении заголовка столбца и заголовка строки.
Каждой ячейке нужны оба заголовка
Число 92 само по себе мало что значит. Свяжите его с Ada и Score — и получится Ada, Score, 92. Такая связь и есть создаваемое Вами соответствие.
Заголовки столбцов сверху
В первой строке находятся заголовки scope=col. Когда пользователь перемещается стрелками вниз по столбцу, программа чтения с экрана продолжает объявлять его заголовок для контекста.
<tr>
<th scope="col">Student</th>
<th scope="col">Score</th>
</tr>Заголовки строк сбоку
Первая ячейка каждой строки тела таблицы становится заголовком scope=row. Она обозначает строку, поэтому при чтении слева направо значения получают информацию о том, кто или когда.
<tr>
<th scope="row">Ada</th>
<td>92</td>
</tr>Угловая ячейка
Верхняя левая ячейка часто находится над заголовками строк и рядом с заголовками столбцов. Оставить её пустым th вполне допустимо — это сохраняет честную структуру сетки.
<tr><th></th><th scope="col">Score</th></tr>Автоматический scope — ловушка
Браузеры пытаются угадать scope, но для чего-либо сложнее самой простой сетки эта догадка ненадёжна. Всегда задавайте scope самостоятельно.
Используйте thead и tbody
Заключайте строки заголовков в thead, а строки данных — в tbody. Это проясняет структуру для вспомогательных технологий и значительно упрощает чтение разметки.
<thead>
<tr><th scope="col">Name</th></tr>
</thead>
<tbody>
<tr><th scope="row">Ada</th></tr>
</tbody>Как это читает программа чтения с экрана
Переместитесь к ячейке данных — пользователь услышит заголовок строки, заголовок столбца, а затем значение. Именно правильно заданный scope делает это объявление точным.
Одна ячейка заголовка — одна задача
Используйте th только в одной роли: заголовка столбца или заголовка строки. Смешивание данных и меток в одной ячейке запутывает соответствие для всех пользователей.
Проверьте, прочитав одну ячейку
Выберите случайную ячейку данных и спросите себя: полностью ли её объясняют заголовки? Если по заголовкам нельзя понять значение числа, Ваш scope задан неправильно.
Пример с двумя осями
Заголовки столбцов сверху, заголовки строк слева, данные посередине. Такая форма матрицы подходит для подавляющего большинства таблиц, которые Вы будете создавать.
<tr><th scope="row">Ada</th><td>92</td><td>88</td></tr>Быстрая проверка
Пользователь перемещается стрелками к ячейке данных глубоко внутри правильно размеченной таблицы.
Итоги: две оси, два значения scope
Для заголовков столбцов используется scope=col, для заголовков строк — scope=row, а каждая ячейка данных находится на их пересечении. Задавайте scope самостоятельно и никогда не полагайтесь на догадку браузера.
Часто задаваемые вопросы
Урок «Правильные заголовки строк и столбцов» бесплатный?
Да — полный текст урока «Правильные заголовки строк и столбцов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «Правильные заголовки строк и столбцов»?
Связывайте каждую ячейку с нужными заголовками. Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Правильные заголовки строк и столбцов»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- th, scope и элемент caption
- Правильные заголовки строк и столбцов
- Сложные таблицы: связывание headers и id
- Таблицы для разметки — ловушка