Состояние навигации

Документ фиксирует, как на сайте определяется текущий раздел.

Основная навигация

В шаблоне _layouts/default.html часть пунктов меню получает:

class="is-current" aria-current="page"

Это работает на уровне Jekyll и помогает подсвечивать основные разделы.

Дополнительная JS-подсветка

В assets/js/main.js добавлена функция enhanceCurrentLinks().

Она проходит по ссылкам в:

• .main-nav;
• .site-footer.

Функция сравнивает текущий URL с URL ссылки и добавляет:

• class="is-current";
• aria-current="page" для точной текущей страницы;
• aria-current="location" для родительского раздела.

Стили состояния

Визуальное состояние активных ссылок в подвале вынесено в файл:

• assets/css/nav-state.css.

Файл подключается в _layouts/default.html после accessibility.css и до print.css.

Зачем это нужно

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

Что проверять после правок меню

• Текущий раздел подсвечивается в верхнем меню.
• Текущая или родительская ссылка определяется в подвале.
• Телефонные ссылки не получают is-current.
• Внешние ссылки не получают aria-current.
• На вложенных страницах активен родительский раздел.