Семантичное связывание заголовка и списка в HTML для доступности

Быстрый ответ

Для семантического выделения заголовков списков используйте вложенные теги <figcaption> внутри <figure> для отдельных списков. В списке, присутствующем в рамках более большой структуры, предпочтительно использовать заголовок (<h1>-<h6>) в <section>.

<figure>
  <figcaption>Заголовок списка</figcaption>
  <ul><li>Элемент</li></ul>
</figure>

<section>
  <h2>Заголовок списка</h2>
  <ul><li>Элемент</li></ul>
</section>

Подписи: сочетание <figcaption> и <figure>

Тег <figcaption> идеально подходит как семантический элемент для подписи списка в контейнере <figure>. Перед стилизацией списков важно сначала обеспечить правильную семантическую структуру.

<figure>
  <figcaption>Список покупок</figcaption>
  <ul>
    <li>Молоко</li>
  </ul>
</figure>

Правила использования заголовков для поддержания высокой семантики

Заголовки (<h1>-<h6>) сразу перед списком (<ul> или <ol>) обеспечивают четкую семантическую связь и удобство для вспомогательных технологий.

<h3 id="fruits">Фрукты</h3>
<ul aria-labelledby="fruits">
  <li>Яблоки</li>
  <li>Бананы</li>
</ul>

Необходимо соблюдать логическую иерархию заголовков, независимо от их h-уровня.

::before и data-attribute: динамичный дуэт для подписей

Применяйте эти техники, когда элементы <header> или классы не видны. Псевдоэлемент ::before и атрибут data- позволяют добавить подпись к списку.

<ul data-caption="Todo-лист">
  <li>Стирка</li>
</ul>

ul:before {
  content: attr(data-caption);
  display: block;
  font-weight: bold;
}

Следите за обновлениями W3C — иногда они вводят новые семантические элементы.

Стилизация списка: верный инструментарий семантики

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

<figure class="list box">
  <figcaption class="necklace">Плейлист</figcaption>
  <ul>
    <li>Bohemian Rhapsody</li>
  </ul>
</figure>

Вы можете использовать CSS для настройки внешнего вида подписей списков:

.stylish-list .list-caption {
  font-size: 1.2em;
  color: #333;
}

Визуализация

Списки без подписей напоминают корабль без капитана. Правильно выполненное добавление подписи напомнит о капитане, ведущем корабль в нужном направлении.

<figure>
  <figcaption>🏷️: "Классические романы"</figcaption>
  <ul>
    <li>📗: "Гордость и предубеждение"</li>
    <li>📘: "Скотный двор"</li>
  </ul>
</figure>

Такой подход устанавливает необходимую семантическую связь.

Семантические альтернативы традиционным спискам

<dl> предлагает встроенную возможность группировки элементов с подписями. В этом теге <dt> выступает как заголовок списка, а <dd> — как перечисленные элементы.

<dl>
  <dt>Капитаны Земли</dt>
  <dd>Стив Роджерс</dd>
  <dd>Капитан Планета</dd>
</dl>

Доступность посредством семантики

Ясная иерархия и использование ARIA-ориентиров обеспечивают простоту восприятия структуры веб-сайта и упрощают его использование.

<nav aria-label="Основная навигация">
  <ul>
    <li>Главная</li>
  </ul>
</nav>

Применение семантики с помощью HTML5 и ARIA

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

<section role="region" aria-labelledby="todays-tasks">
  <h2 id="todays-tasks">Задачи на сегодня</h2>
  <ul><li>Задача 1</li></ul>
</section>

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

Полезные материалы

1. <h1>–<h6>: Разделы заголовков HTML — как организовать структуру документа с помощью заголовков.
2. Использование ARIA — руководство по использованию ARIA с HTML для улучшения доступности веб-страниц.
3. Семантические элементы HTML — изучите семантические элементы в HTML5 для более значимого размещения контента.
4. Обзор WCAG 2 | W3C — руководство по созданию доступного веб-контента.
5. <dl>: Элемент списка описаний — как семантически использовать элемент списка описаний.
6. <ul>: Элемент неупорядоченного списка — особенности элемента неупорядоченного списка.
7. Как создать доступные фронтенд-компоненты — Smashing Magazine — принципы создания доступных фронтенд-компонентов, включая списки и их описания.