Как разметить блоки на страницы для удобной навигации?

Разметка блоков для удобной навигации: принципы и практика

Эффективная разметка блоков для навигации — это сочетание семантической вёрстки, ARIA-атрибутов и логической структуры. Ключевая цель — сделать страницу предсказуемой и доступной для всех пользователей, включая тех, кто пользуется скринридерами или клавиатурой.

Семантические HTML-элементы как фундамент

Использование правильных тегов сразу задаёт понятную структуру:

<!-- Основная навигация сайта -->
<nav aria-label="Основное меню">
  <ul>
    <li><a href="/">Главная</a></li>
    <li><a href="/about">О нас</a></li>
    <li><a href="/services">Услуги</a></li>
  </ul>
</nav>

<!-- Навигация внутри статьи -->
<nav aria-label="Оглавление статьи">
  <ol>
    <li><a href="#intro">Введение</a></li>
    <li><a href="#chapter1">Глава 1</a></li>
  </ol>
</nav>

<!-- Хлебные крошки -->
<nav aria-label="Хлебные крошки">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/"><span itemprop="name">Главная</span></a>
    </li>
  </ol>
</nav>

Ключевые принципы организации навигационных блоков

1. Иерархическая ясность

• Главное меню должно быть в начале DOM (после пропускающих ссылок)
• Локальная навигация располагается ближе к контенту, которому принадлежит
• Пагинация, хлебные крошки и дополнительные меню логически группируются

2. ARIA-разметка для уточнения ролей

<nav aria-label="Пагинация">
  <ul role="navigation">
    <li><a href="/page/1" aria-label="Страница 1">1</a></li>
    <li><a href="/page/2" aria-current="page">2</a></li>
  </ul>
</nav>

<div role="search" aria-label="Поиск по сайту">
  <!-- Поле поиска -->
</div>

3. Логический порядок фокуса

• Используйте tabindex="0" для интерактивных блоков, которые не являются ссылками по умолчанию
• Для скрытых меню используйте tabindex="-1" и управляйте фокусом через JavaScript
• Всегда предусматривайте клавиатурную навигацию внутри выпадающих меню

Практические паттерны разметки

Комплексная навигация с выпадающими меню:

<nav aria-label="Основное меню" class="main-nav">
  <button class="menu-toggle" aria-expanded="false" aria-controls="menu-list">
    Меню
  </button>
  <ul id="menu-list" class="menu-list" hidden>
    <li>
      <a href="/products" aria-haspopup="true">Продукты</a>
      <ul aria-label="Подменю продуктов">
        <li><a href="/products/web">Веб-приложения</a></li>
        <li><a href="/products/mobile">Мобильные приложения</a></li>
      </ul>
    </li>
    <li><a href="/contact">Контакты</a></li>
  </ul>
</nav>

Боковая навигация с визуальными подсказками:

<aside aria-label="Боковая панель навигации">
  <nav aria-label="Разделы документа">
    <h2>Содержание</h2>
    <ul>
      <li><a href="#getting-started" class="nav-link active">Начало работы</a></li>
      <li><a href="#api" class="nav-link">API Reference</a></li>
    </ul>
  </nav>
  
  <div class="progress-indicator" aria-label="Прогресс чтения">
    <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</aside>

Списки рекомендаций для реализации

Обязательные элементы:

• Тег <nav> для основных навигационных блоков
• Атрибут aria-label или aria-labelledby для обозначения назначения каждого блока
• Логический порядок в DOM (не полагайтесь только на CSS-позиционирование)
• Чёткие визуальные разделители между независимыми навигационными блоками

Для сложных интерфейсов:

• Используйте landmark roles (role="navigation", role="search", role="banner")
• Реализуйте механизм "пропустить навигацию" для пользователей скринридеров
• Для мобильных версий используйте адаптивные паттерны (бургер-меню, аккордеоны)
• Добавляйте визуальную обратную связь для текущего положения (aria-current="page")

Тестирование и доступность:

• Проверяйте порядок фокуса с клавишей Tab
• Тестируйте со скринридерами (NVDA, VoiceOver)
• Убедитесь, что цветовой контраст соответствует WCAG AA (минимум 4.5:1)
• Обеспечьте работу навигации без JavaScript

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