Семантическая разметка HTML: элементы и структура страницы

Прямой ответ

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

<header><nav aria-label="Основная">...</nav></header>
<main>
  <h1>Заголовок страницы</h1>
  <section aria-labelledby="s1"><h2 id="s1">Раздел</h2></section>
</main>

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

Назначение элемента и встроенная семантика

Элемент разметки объявляет назначение содержимого, поэтому семантика определяет, как вспомогательная технология читает блок.

Семантический элемент. Назначение блока определяется типом элемента, поэтому роль объявляется без дополнительного атрибута.

Произвольный блок. Блок без семантики не объявляет назначение, поэтому содержимое читается как неструктурированный текст.

Интерактивный элемент. Элемент действия объявляет назначение и достигается с клавиатуры, поэтому поведение соответствует объявлению.

Практическое следствие: интерактивный элемент, реализованный произвольным блоком, не объявляет назначение и не достигается с клавиатуры, поэтому действие недоступно без указателя.

Отдельный аспект — элемент ссылки и элемент действия. Ссылка обозначает переход на иной адрес, действие обозначает выполнение операции, поэтому подмена одного другим даёт недостоверное объявление назначения.

Структура заголовков и разделов

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

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

Последовательные уровни. Уровень заголовка не пропускается, поэтому иерархия разделов читается корректно.

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

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

Разделы страницы и переход к содержимому

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

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

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

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

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

О ARIA-атрибутах — в статье про ARIA-атрибуты; о таблицах и списках — в статье про доступные таблицы и списки.

Язык страницы и направление текста

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

Язык страницы. Значение языка задаётся для документа, поэтому произношение текста соответствует языку содержимого.

Язык фрагмента. Фрагмент на ином языке объявляется отдельно, поэтому произношение переключается для этого фрагмента.

Направление текста. Направление чтения объявляется для языков с письмом справа налево, поэтому порядок элементов соответствует направлению.

Практическое следствие: страница без объявления языка читается произношением по умолчанию, поэтому текст на ином языке произносится неразборчиво.

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

Практика: применение семантической разметки

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

2. Различайте элемент ссылки и элемент действия. Назначение элемента соответствует выполняемой операции.

3. Задавайте единственный заголовок первого уровня. Тема страницы объявляется до чтения содержимого.

4. Не пропускайте уровни заголовков. Иерархия разделов читается корректно, поэтому навигация предсказуема.

5. Выделяйте основное содержимое отдельным элементом. Переход к содержимому выполняется без чтения шапки.

6. Называйте навигационные блоки. Назначение блока определяется до чтения состава элементов.

7. Проверяйте структуру страницы вспомогательной технологией. Иерархия и переходы подтверждаются проверкой.

Рекомендации:

1. Не реализуйте интерактивный элемент произвольным блоком. Элемент не объявляет назначение и не достигается с клавиатуры.
2. Учитывайте различие ссылки и действия. Подмена одного другим даёт недостоверное объявление назначения.
3. Сопоставляйте уровень заголовка с уровнем раздела. Пропуск уровня нарушает иерархию навигации.
4. Фиксируйте проверку структуры в процессе разработки. Нарушение обнаруживается до выпуска.
5. Пересматриваем разметку при добавлении нового раздела. Новый раздел требует заголовка и выделения областью.

Практический сценарий: навигация по странице требовала чтения всего текста

Контекст: пользователь вспомогательной технологии не мог перейти к нужному разделу, не прочитав предшествующее содержимое.

1. Диагностика. Проверка показала, что разделы страницы были размещены произвольными блоками без заголовков и выделения областью. Иерархия заголовков отсутствовала, поэтому переход по уровням не работал.
2. Причина. Разметка не объявляла структуру разделов, поэтому вспомогательная технология читала страницу как неструктурированный текст.
3. Действия. (а) Добавили единственный заголовок первого уровня для темы страницы и последовательные заголовки для разделов без пропуска уровней; (б) выделили каждый раздел отдельной областью с названием, чтобы переход выполнялся по объявлению; (в) выделили основное содержимое отдельным элементом, чтобы переход к нему выполнялся одной командой; (г) назвали навигационные блоки, чтобы назначение определялось до чтения состава; (д) проверили структуру вспомогательной технологией и убедились в работе перехода по уровням.
4. Результат. Переход к разделу выполняется по иерархии заголовков, поэтому последовательное чтение предшествующего текста не требуется.

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

FAQ

Чем семантический элемент отличается от произвольного блока? Семантический элемент объявляет назначение содержимого встроенной разметкой, поэтому роль читается без дополнительного атрибута.

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

Что даёт выделение основного содержимая? Переход к содержимому выполняется одной командой, поэтому чтение шапки и навигации не требуется.

Можно ли заменить кнопку ссылкой? Нет, ссылка обозначает переход на иной адрес, а действие — выполнение операции. Подмена даёт недостоверное объявление назначения.

Источники: HTML semantics, HTML sections, W3C WAI Page Structure — ссылки в шапке.