Иерархия семантических заголовков

Раньше я думала, что WCAG не регламентирует правильную структуру заголовков h1–h6. Оказалась не права, эти требования существуют!

Описаны в критерии 1.3.1 Info and Relationships (уровень A). Общий смысл критерия — всё должно быть по семантике. Более конкретные примеры и требования касательно заголовков раскрываются в разделе Techniques:

• G141: Organizing a page using headings • H42: Using h1-h6 to identify headings • ошибки приведены в F43: Failure of Success Criterion 1.3.1 due to using structural markup in a way that does not represent relationships in the content

Основные правила использования заголовков человеческим языком:

— Каждая страница должна иметь один уникальный заголовок h1. — Заголовки должны идти последовательно: за h1 следует h2, за h2 следует h2 или h3 и так далее. — Нельзя пропускать уровни заголовков: переходить от h1 сразу к h3 без промежуточного уровня h2. — Заголовки должны отражать структуру страницы и передавать суть каждого раздела. — Если по дизайну заголовка нет, но логически блок является разделом, то можно добавить визуально скрытый заголовок с помощью паттерна .visually-hidden.

Правильная иерархия поможет незрячим пользователям разобраться в структуре страницы и быстро перейти к нужному разделу. #семантика #wcag