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