Ссылки родительских разделов меню
Родительский раздел меню остается ссылкой на свою страницу; подменю раскрывается отдельной кнопкой.
Опубликовано Проверено Изменено
Плохо
<button>Каталог</button>
<!-- Страница каталога существует, но перейти на нее из меню нельзя. -->
Хорошо
<nav aria-label="Основная навигация">
<ul><li>
<a href="/catalog/">Каталог</a>
<button type="button" aria-expanded="false" aria-controls="catalog-links"
aria-label="Подразделы каталога">⌄</button>
<ul id="catalog-links" hidden>
<li><a href="/catalog/tools/">Инструменты</a></li>
</ul>
</li></ul>
</nav>
Почему это важно
Навигация и раскрытие являются разными действиями. Ссылка сохраняет открытие в новой вкладке, доступность и индексируемый адрес.
Когда применять
Для верхнего, бокового и мобильного меню, когда родительский пункт имеет собственную страницу. Если страницы нет, достаточно кнопки с названием группы.
Требования
- Ссылка ведет на существующий URL категории. Соседняя кнопка управляет только подменю; нажатие ссылки не подменяется раскрытием.
- Обработчик кнопки синхронно изменяет aria-expanded и hidden. Пример показывает начальную HTML-разметку, а не готовую реализацию обработчика.
- Tab/Shift+Tab проходят ссылки и кнопки; Escape закрывает подменю и возвращает фокус на его кнопку. Управление доступно touch и без hover.
- Для обычной навигации используйте nav и списки; роль menu не добавляется без полного соответствующего клавиатурного контракта. Активная страница может отмечаться aria-current="page".
Кто что делает
Человек
Выбирает, у каких пунктов есть собственная страница и дочерние ссылки; проверяет понятность двух действий на телефоне.
AI-агент
Реализует ссылку и отдельную disclosure-кнопку; проверяет Enter, Escape, фокус, новую вкладку и прямой URL.
Как проверить у себя
- Откройте родительскую категорию обычным кликом, Enter, Ctrl/Cmd-click и средней кнопкой.
- Отдельно раскройте/закройте подменю клавиатурой и touch; проверьте Escape, фокус и соответствие aria-expanded видимости.
Первоисточники
История изменений на GitHubДата проверки отражает содержательную сверку. Синхронизация сайта не обновляет её автоматически.