Заголовки, их иерархия и структура документа.

Перевод статьи:  Headings, heading hierarchy, and document outlines.
Автор:  Roger Johansson.

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

Важность заголовков.

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

Важность HTML заголовков, реализуемых с помощью <h1>…<h6> элементов очень трудно переоценить. Они должны использоваться для разметки компонентов, которые визуально выглядят как заголовок или выполняют его роль. Отчасти это объясняется тем, что такой подход семантически корректен, а также он учитывается поисковиками и влияет на позиции сайта. Но самым важным моментом в вопросе значимости заголовков является тот факт, что их наличие значительно повышает доступность и удобство использования веб-документов.

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

В результате имеем несколько веских причин в пользу использования заголовков, причем их корректного использования.

Требования, предъявляемые к правильной структуре документа.

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

  • Любой документ должен иметь логическую структуру, состоящую из заголовков, начиная с первого уровня и далее в низ по существующей иерархии без пропусков.
  • Все, что визуально выглядит как заголовок должно быть реализовано с помощью элементов заголовков.
  • Заголовок, имеющий отношение к основному контенту страницы должен быть оформлен в виде элемента заголовка высшего уровня <h1>.
  • Каждый документ должен содержать не более одного заголовка первого уровня.

Вопрос, четкого ответа на который я так и не нашел, звучит следующим образом:

«Как необходимо поступать в том случае, если основной заголовок документа по сути не является первым текстовым фрагментом, который может быть заключен в рамки элемента заголовка? Создать фиктивный <h1> заголовок в верхней части документа? Отступить от принципов построения идеальной структуры документа и в качестве первого заголовка использовать <h2> элемент? Или существуют другие варианты?»

Руководство по применению заголовков.

В поисках руководства, позволяющего решить проблему, я поинтересовался, что по этому поводу сказано в WCAG 2.0 и в предусмотренных данным стандартом способах описания документа я обнаружил следующие фрагменты:

С целью понимания общей структуры документа и облегчения навигации по ней, разработчики должны использовать заголовки с четким соблюдением иерархии их уровней (например, после <h1> следует <h2>, затем следует <h3>, затем <h4> и т.д.).

G141: Организация страницы с использованием заголовков.

В этом примере главная часть контента страницы находится в средней колонке трех-колончатого макета.

<head>
<title>Stock Market Up Today</title>
</head>
<body>

<!— left nav —>
<div class="left-nav">
<h2>Site Navigation</h2>
<!— content here —>
</div>

<!— main contents —>
<div class="main">
<h1>Stock Market up today</h1>
<!— article text here —>
</div>

<!— right panel —>
<div class="left-nav">
<h2>Related links</h2>
<!— content here —>
</div>
</body>

Заглавие основного контента совпадает с общим наименованием веб-страницы в целом и размечено с использованием элемента <h1>, но, тем не менее, он не является самым первым элементом страницы. При этом содержание первой и третьей колонки имеет менее важное значение и поэтому их заголовки находятся в элементах <h2>.

H42: Использование элементов h1–h6 для определения заголовков.

Уточнение:  Роберто Скано указал на то, что упомянутые выше техники достижения соответствия удовлетворяют разным критериям успеха, относящимся к различным уровням соответствия стандарту.

Так H42: Использование элементов h1–h6 для определения заголовков — является техникой, в достаточной степени отвечающей критерию успеха 1.3.1 (Информация и взаимосвязь), который отвечает первому уровню соответствия Level A, в то время как G141: Организация страницы с использованием заголовков — техника, удовлетворяющая критерию успеха 2.4.10 (Заголовки разделов документа), который находится на третьем уровне соответствия стандарту Level AAA.

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

Возможные варианты.

Принимая во внимание все упомянутое выше, можно выделить два имеющих право на существование пути решения вопроса:

  1. Пренебрегаем необходимостью использования элемента <h1> для первого заголовка документа и применяем элементы более низкого уровня, для разметки заголовков, расположенных выше основного заголовка документа (как это показано во втором примере, представленном в WCAG 2.0).
  2. Позаботиться о том, чтобы логотип компании располагался достаточно высоко в разметке, с целью представления его в роли первого заголовка документа, оформленного как <h1>. Все промежуточные заголовки, находящиеся между логотипом и заглавием документа, которое тоже является <h1> заголовком, должны быть меньшего уровня.

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

<div id="header">
<h1><img src="logo.gif" alt="Organisation name"></h1>
<h2>Main menu</h2>
<ul>
<li></li>
</ul>
</div>
<div id="nav-sub">
<h2>Sub menu</h2>
<ul>
<li></li>
</ul>
</div>
<div id="content-primary">
<h1>Page title</h1>
<p>Page content.</p>
</div>

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

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

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

Четыре вопроса. А где же ответы?

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

  1. Имеете ли вы какие-нибудь альтернативы предложенным в статье вариантам решения проблемы?
  2. Если нет, то какой метод, на ваш взгляд самый приемлемый и почему?
  3. Многие рекомендуют использовать только один <h1> заголовок на странице. Но почему, и что именно является препятствием для применения двух и более заголовков высшего уровня? В некоторых реальных случаях это вполне возможно.
  4. И в действительности ли для людей, пользующихся программами чтения экрана и других средств, использующих заголовки для навигации, имеет значение то, какого уровня будет первый заголовок документа?

* Позже, через полгода после публикации этой статьи, Роджер Йохансонн пишет еще один пост на эту тему, который основан на результатах дискуссии, вызванной этой статьей. Данный вопрос также затрагивается в более свежей статье автора, посвященной секционным элементам HTML5 спецификации.

* Примечание переводчика.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *