Аудит Heading elements are not in a sequentially-descending order

Screen readers have commands to quickly jump between headings or to specific landmark regions. In fact, a survey of screen reader users found that they most often navigate an unfamiliar page by exploring the headings.

By using correct heading and landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technologies.

Почему не удается пройти аудит уровней заголовков в Lighthouse #

Lighthouse помечает страницы, в заголовках которых пропущен один или несколько уровней:

Например, если для названия страницы используется элемент <h1>, а для основных разделов страницы используются элементы <h3>, то этой странице не удастся пройти аудит, так как пропущен уровень <h2>:

<h1>Название страницы</h1>
  <h3>Заголовок раздела 1</h3>
  …
  <h3>Заголовок раздела 2</h3>
  …

Как исправить неправильную структуру заголовков #

• Сделайте так, чтобы все элементы заголовков следовали логическому числовому порядку, отражающему структуру содержимого.
• Убедитесь, что в тексте заголовка четко передано содержание соответствующего раздела.

Пример:

<h1>Название страницы</h1>
<section>
  <h2>Заголовок раздела</h2>
  …
    <h3>Заголовок подраздела</h3>
</section>

Один из способов проверить структуру заголовков — спросить себя «Если создать схему моей страницы, используя только заголовки, не была бы она бессмысленной?»

Кроме того, можно использовать ряд средств, например расширение Microsoft Accessibility Insights, для визуализации структуры страницы и выявления неупорядоченных элементов заголовков.

Дополнительную информацию см. В публикации «Заголовки и ориентиры».

Ресурсы #

• Исходный код аудита Headings skip levels
• Уровни заголовков должны увеличиваться только на единицу (Deque University)