Заголовки — это основа содержания страницы. Посетитель должен иметь возможность просмотреть веб-страницу, используя заголовки, чтобы получить хорошее представление о ее содержании.

Уровни заголовков имеют значение, особенно для пользователей программ чтения с экрана и поисковых систем. Это означает наличие одного уникального заголовка первого уровня на странице, а остальные заголовки представляют содержимое страницы, аналогичное указателю книги: легко читаемые и семантические. , также полезен для SEO.

Заголовки в HTML

Заголовки — это элементы HTML. Основной заголовок, h1относится к уровню 1. Другие уровни — от h2 до h6. HTML Living Standard указывает на заголовки:

Заголовок можно использовать там, где ожидается содержание заголовка. Содержимое заголовка определяет заголовок раздела (будь то явно размеченный с помощью элементов содержимого раздела или подразумеваемый самим содержимым заголовка). Элементы h5 и h6

Короче: используйте заголовок, когда этого требуют содержание или структура страницы.

Обобщение лучших практик ]Используйте один уникальный h1 на странице, который описывает, о чем эта страница. Этот h1 желательно начинать сразу над основным содержанием.

Используйте заголовки для описания содержимого ниже. Не используйте заголовок HTML только для того, чтобы текст казался больше или выделялся.

Используйте уровни заголовков, такие как индекс книги: иерархический.

Не выбирайте заголовок по его размеру, но по уровню в контексте содержания.

Не пропускайте уровень заголовка сверху вниз.

Распространенные ошибки:

• Использование заголовок h2 для кавычек из-за большого размера шрифта. вам нужно.
• Исключительно использование заголовков h2 на веб-странице, потому что все заголовки имеют одинаковый размер в дизайне.
• Использование нескольких заголовков h1 на веб-странице.
• Опускать заголовки, поскольку дизайн четко указывает на начало нового раздела.
• Оставлять заголовки пустыми (обычно сбой CMS).

Что означает иерархический?

Иерархический означает упорядочение от самого важного к наименее важному. h1 — самый важный уровень заголовка, h6 — наименее. для заголовка страницы дайте наиболее важным разделам h2 и, при необходимости, добавьте h3 или, может быть, даже h4чтобы разделить содержимое в Раздел h2.

Вам нужно начинать с h1только если это имеет смысл для структуры и дизайна вашего контента. Например:

 h2 = главное меню
h1 = название новостной статьи
h2 = подзаголовок в содержании новостной статьи
h3 = подзаголовок h2
h4 = подзаголовок h3
h2 = подзаголовок в содержании новостной статьи
h2 = новости по теме (раздел в стороне)
h2 = свяжитесь с нами (в нижнем колонтитуле)
h3 = адрес (информация об адресе)
h3 = Следуйте за нами (ссылки на социальные сети)

WCAG о заголовках

Что говорится в Руководстве по обеспечению доступности веб-контента (WCAG) о заголовках? На самом деле они не очень конкретны в этой теме. 2.4.6 Заголовки и метки. Обеспечьте способы помочь пользователям перемещаться, находить контент и определять, где они находятся. Заголовки и метки описывают тему или цель.

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

Критерий успеха: 1.3. 1 Информация и отношения. Информация, структура и отношения, передаваемые через презентацию, могут быть определены программно или доступны в виде текста. Другими словами: если это выглядит как заголовок, это должен быть заголовок в HTML (а не, например, текст, выделенный жирным шрифтом). Короче говоря: используйте заголовки для описания контента и используйте их последовательно. и семантически. Это поможет всем пользователям лучше находить нужный контент.

Только уровень WCAG 2 AAA требует, чтобы заголовки были структурированы. Критерий успеха 2.4.10 гласит: Заголовки разделов используются для организации контента. которые имеют тройную оценку A (AAA), если это полезно для ваших пользователей.

Хорошо организованная структура заголовков помогает всем, особенно пользователям программ чтения с экрана, понимать веб-страницу и перемещаться по ней.

Один h1

О да, эта старая жаркая дискуссия. Могу ли я использовать несколько h1 на веб-странице? Краткий ответ: нет. h1 предназначен только для заголовка страницы.

Наличие нескольких h1 на веб-странице является плохой практикой, для доступности и для SEO. Это создает плоскую и бессмысленную структуру. Но это не нарушение WCAG 2 AA. Длинный ответ включает в себя краткий урок истории. Использование нескольких h1 было предложено с введением HTML Document Outline в HTML5. Каждый раздел схемы может содержать H1. Но вот загвоздка: Схема документа никогда не адаптировалась браузерами или вспомогательными технологиями. Поэтому поддержка нескольких h1s была прекращена в HTML5.1. Стивен Фолкнер и «Алгоритм структуры документа не существует» Адриана Роселли. спор на GitHub.

Заключение: несколько h1 в разделах для создания структуры документа не поддерживаются браузерами и, следовательно, устарели.

Используйте one h1описывая содержание веб-страницы. Структурирование остального контента с помощью значимых подзаголовков. Это лучше всего подходит для обеспечения доступности и SEO. HTML-элемент hgroup представляет собой многоуровневый заголовок раздела документа. Он группирует набор элементов

–

. Но документация MDN по hgroup содержит два четких предупреждения:

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

является влияние на то, как заголовки отображаются с помощью алгоритма структуры, определенного в спецификации HTML, но алгоритм структуры HTML не реализован ни в одном браузере, то

семантика на практике является только теоретической. .

Навигация по заголовкам

Мы все перемещаемся по заголовкам (и ссылкам), потому что они выделяются. Сначала люди не читают веб-страницу, они просматривают и просматривают контент в поисках того, что хотят прочитать. Только если они находят то, что ищут, они начинают читать.

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

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

Навигация по заголовкам очень распространена. Опрос пользователей программ чтения с экрана, проведенный WebAIM в 2021 году, показал, что 67,7% используют заголовки для поиска информации. 85,7% респондентов считают уровни заголовков очень или в некоторой степени полезными.

Создавайте заголовки и структуру заголовков с учетом этой информации. Предоставьте информацию о содержании страницы с вашими заголовками, в том числе для тех, кто не может видеть содержимое страницы. . Это может быть тизер "Подпишитесь на нашу рассылку!" над формой подписки. Заголовок страницы и подзаголовки для разделения текста на смысловые части. Краткое содержание следующего содержания: «Контактная информация». Или укажите на дополнительный контент «Похожие новости».

Сделайте текст заголовка описательным и сделайте его понятным сам по себе, вне контекста. Для тех, кто читает список заголовков. Пусть текст заголовка расскажет о содержании вашей страницы.

Длина текста заголовка

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

Заголовки в дизайне

Ниже приведены некоторые рекомендации по использованию заголовков в дизайне.

ВСЕ ПРОПИСНЫЕ

Текст во всех столицах труднее читать. Форма слова исчезает, каждое слово становится прямоугольником. Исследования показывают, что текст, набранный прописными буквами, особенно сложен для читателей с дислексией. Облегчите жизнь своим читателям, не пишите все слова с заглавной буквы. дизайн

Как дизайнер, посмотрите на структуру содержимого шаблона веб-страницы и задайте себе следующие вопросы:

• Как пользователь может просмотреть содержимое по заголовкам?
• Есть ли на каждой странице четкий уникальный заголовок над основным содержанием?
• Есть ли у важных разделов контента заголовки?
• Текст просто большой (выглядит как заголовок) без связанного контента под ним?

Сделайте контент доступным для сканирования с помощью заголовков.

Заголовки в разработке

Ниже приведены некоторые рекомендации по использованию заголовков в разработке.

Заголовки в повторно используемых компонентах

Карточки, виджеты, связанный контент, формы и др. l компоненты, которые можно повторно использовать на любой странице и вставлять в контент темой или менеджером контента.

Большинство компонентов имеют собственный заголовок, и этот заголовок должен соответствовать структуре заголовка страницы. Например: на странице с последними новостями отдельные новости имеют заголовок с уровнем h2. Но в компоненте «связанные новости» остальные «связанные новости» имеют уровень заголовков h2а новости — уровень h3.

Презентация новости могут быть одинаковыми, меняется только уровень заголовка. Две возможности:

1. Дайте контент-менеджеру возможность добавлять или изменять заголовок при добавлении компонента.
2. Если компонент добавляется по теме: измените уровень заголовка по мере необходимости. в коде.

Является ли логотип заголовком?

Вероятно, нет.

В большинстве дизайнов логотип повторяется на каждой странице одновременно ролик, содержащий тот же текст. Часто логотип также является ссылкой на главную страницу. Это ожидаемое поведение, и это совершенно нормально.

Но заворачивать логотип в h1в результате чего h1 является названием сайта, неправильно. Потому что тогда каждая отдельная страница сайта начинается с одного и того же текста h1. Это сбивает с толку пользователей программ чтения с экрана и неинформативно для поисковых систем.

Существуют конструкции, позволяющие заключить логотип только в h1 на главной странице и сделать логотип ссылкой только на главной странице. другие страницы. Это могло бы сработать, но это непоследовательно. Лучшим решением для дизайнера является добавление четкого и уникального h1 также на главную страницу. использование ARIA с заголовками.

role="heading"

С помощью ARIA можно добавить к элементу роль заголовка и атрибут уровня aria.

        < " aria-level="2"[19559051][5190][59051][5190] >
Мой заголовок
</div>[0][1941940][1941940][0][1941940]
Или даже изменить уровень заголовка:
h2aria-level="3"[5941940591][59459591][194590591][194590591]>
Мой заголовок
h2>[51945940][51945940][51945940] ]
role="heading" очень хорошо поддерживается вспомогательными технологиями.
Каковы варианты использования этого? Потому что, ну, зачем использовать ARIA, если доступен полностью допустимый HTML-элемент? Кроме того, первое правило ARIA гласит: не используйте ARIA, если для задания есть встроенный HTML-элемент. Небольшой запрос в Twitter показывает, что разработчики используют ARIA для добавления или изменения заголовков для по следующим причинам:
 Исправьте структуру заголовков устаревшего кода без необходимости корректировки CSS. Это быстрое исправление, которое имеет смысл, когда нет бюджета на рефакторинг CSS.
Используйте div с ролью заголовка и уровня арии, чтобы избежать удаления собственного стиля заголовка CSS. Веб-разработчики не должны подходить к своему коду таким образом.
Добавьте уровень выше 6, например, в юридических документах, которые могут быть очень сложными с точки зрения заголовков.
Один из самые примечательные причины упомянуты: используйте арии-заголовки для SEO. Если заголовок необходим для структуры заголовка, но не является «хорошим» для SEO, скройте заголовок от Google, используя объявление role="heading" вместо собственного элемента заголовка HTML5.
 Это создает теневую структуру заголовков для программ чтения с экрана, отличную от фактической структуры заголовков HTML. Поскольку нет доказательств того, что поисковым системам нужна другая структура заголовков для представления контента, это можно считать плохой практикой. aria-labelledby

С помощью aria-labelledby можно дать название разделу или другому ориентиру, обратившись к заголовку. См. также: Начало работы с ARIA. "sweets-section-heading">
[109[59459049]<59 ]h2 id="sweets-section-heading"[50459051][519491051][519491051][5194051][5194051] ]

) >
<p>
Овсяный пирог, глазурь, ириска, мармелад, мишки, мармелад, десерт, сладкий. Печенье
терпкое драже мармеладные мишки имбирные пряники вафли медвежий коготь датский. Желейные бобы
фруктовый пирог жевательные резинки с кунжутом снеки драже сладкий рулет. Пользователи программ чтения с экрана могут перемещаться по заголовкам, а также по ориентирам. Таким образом, название ориентира может быть унаследовано соответствующим заголовком.

Навигация по ориентирам не так распространена среди пользователей программ чтения с экрана. Маркировка может не потребоваться для каждого отдельного участка или ориентира. При чтении контента заголовок раздела объявляется в дополнение к заголовку, добавляя к беспорядку текста, который слышит пользователь программы чтения с экрана. относятся к поисковой оптимизации (SEO)? Поисковые системы любят текст, содержание, письменное слово, чтобы понять содержание страницы. Поскольку заголовки определяют структуру контента, поисковая система лучше понимает и правильно индексирует страницу.

Существует множество теорий и заблуждений относительно структуры заголовков и SEO. Как часто мы слышим аргумент «Мой эксперт по SEO потребовал, чтобы я [ … ]» заполнил пробелы в качестве причины структуры заголовка, которая не имеет никакого смысла для слепого читателя?

Купер Холлмайер развеивает больше мифов о доступности и поисковой оптимизации. Есть гуру поисковой оптимизации, которые действительно понимают суть заголовков. Я хотел бы привести две цитаты из книги SEO-компании Yoast «Как использовать заголовки на вашем сайте»:

Заголовки помогают пользователям и поисковым системам читать и понимать текст. Например, они действуют как указатели для читателей и облегчают им понимание того, о чем пост или страница. Заголовки также определяют, какие части вашего контента являются важными, и показывают, как они взаимосвязаны. Внесение незначительных изменений в отдельные заголовки, скорее всего, не улучшит вашу работу. Однако есть косвенные преимущества. Использование заголовков создает тексты более высокого качества, которые также легче читать. Чем лучше текст, тем лучше для пользователей и лучше для вашего SEO.

Создавайте хорошо структурированные заголовки, потому что то, что хорошо для вашего читателя, хорошо и для вашего SEO.

] Помимо инструментов автоматической проверки, таких как Axe Devtools, есть некоторые надстройки для браузера и функции CMS для быстрой визуальной проверки структуры заголовков. Надстройка HeadingsMap от Jorge Rumoroso дает четкое визуальное представление структуры заголовков и указывает на ошибки, связанные с пропуском уровней и неправильным порядком. Проект доступности."/>

Инструмент оценки WAVE от WebAIM

Этот инструмент показывает, встроенное в ориентиры, визуальное представление структуры заголовка.

Спасибо Стиву Фолкнеру за отзыв. Стаж: Инвалидность: скажем слово