Семантика страницы: ориентиры для навигации
Как организовать шапку, навигацию, основную область и разделы, чтобы структура помогала чтению.
Зачем это нужно
Семантическая структура полезна не только поиску. Она помогает вспомогательным технологиям выделить основную область, навигацию и другие ориентиры. Человек может быстро перейти к нужной части, не проходя каждый повторяющийся элемент.
Отделите содержимое от окружения
Общий header содержит вводную часть сайта, nav — важные группы ссылок, main — основное содержимое текущей страницы. Footer оставьте для заключительных сведений. Не добавляйте несколько видимых main без особой архитектурной причины.
Назовите повторяющиеся ориентиры
Если nav несколько, задайте разные aria-label, например «Основное меню» и «На этой странице». Название должно помогать различить области. Не дублируйте очевидное слово «навигация» в каждой подписи.
Сохраните порядок исходного документа
Порядок чтения должен быть логичным и без CSS. Визуальная перестановка через order или Grid не обязательно меняет клавиатурную последовательность. Сначала стройте понятную разметку, затем оформление.
Важное ограничение
Контрольная проверка
- На странице есть ясный основной заголовок.
- Основная область отделена от повторяющегося меню.
- Названия нескольких nav различаются.
- Порядок чтения понятен без оформления.