navigation

Кога да се използва

Използвайте <nav>. Елементът обвива набор от навигационни връзки — основна навигация на сайта, вградено съдържание на страницата, навигационна пътека (breadcrumb), връзки в долния колонтитул, пагинация. Всеки <nav> се представя като ориентир за навигация.

За разлика от banner и main, множество навигационни ориентири на страница са норма. Заглавната секция съдържа навигация „Основна”; статията — навигация „На тази страница”; долният колонтитул — навигация „Карта на сайта”.

role="navigation" върху <div> е подходящо само когато използването на <nav> е невъзможно (напр. в остаряла система за управление на съдържанието).

Не всяко нещо, „навигиращо” из страницата, е навигационен елемент. Списък от три връзки в средата на абзац е просто текст — обвиването му в <nav> би създало излишен шум. Запазвайте <nav> за основни колекции от връзки, чрез които потребителите действително се придвижват.

Кога да се добави наименование

Когато на страницата има повече от един навигационен ориентир (а това почти винаги е така), всеки ТРЯБВА да има уникално достъпно наименование чрез aria-label или aria-labelledby. В противен случай менюто с ориентири на екранния четец показва три записа „навигация” и потребителят не може да ги разграничи.

Стандартни наименования: „Основна”, „Допълнителна”, „Долен колонтитул”, „Навигационна пътека”, „Пагинация”, „На тази страница”, „Препратка за прескачане”.

Чести грешки

• Множество елементи <nav> без наименования. Неразличими в менюто с ориентири.
• Обвиване на единична връзка в <nav> — прекомерно; достатъчно е <a>.
• aria-label="Navigation" — излишно. Ролята вече е „navigation”; екранните четци обявяват „Навигация, навигация”. Използвайте смислено наименование като „Основна” или „Навигационна пътека”.
• Основна навигация, рендирана с role="menu" или role="menubar". Навигацията на сайта не е меню на приложение — вижте страницата за menu.
• Навигационна пътека (breadcrumb) без aria-label="Breadcrumb". Конвенцията изисква наименованието, за да бъде разпозната ролята.

Пример

<header>
  <nav aria-label="Primary">
    <a href="/bg/toolkit/">Toolkit</a>
    <a href="/library/">Library</a>
  </nav>
</header>

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/bg/toolkit/">Toolkit</a></li>
    <li aria-current="page">Standards</li>
  </ol>
</nav>