# Мобильное меню сайта: как проверить открытие, ссылки и закрытие

Проверка мобильного меню по состояниям: открытие, закрытие, переходы, прокрутка и клавиатура — с заданием на исправление и сценарием приёмки

Автор: Редакция KEIVO
Дата публикации: 2026-10-31
Канонический URL: https://keivo.ru/blog/mobilnoe-menyu-sayta/

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



Анимация панели не подтверждает готовность навигации — под ней могут остаться недоступные ссылки, потеряться прокрутка или исчезнуть фокус клавиатуры

Ниже — сценарий для проверки существующего меню и подготовки требований к новому — без выбора оформления вместо задачи сайта

## Какое поведение меню нужно согласовать

Определите, что именно открывается по кнопке: небольшой список под шапкой или панель поверх страницы — от этого зависят прокрутка, закрытие и управление фокусом

Запишите видимые пункты и адрес каждого — если название одновременно ведёт на страницу и раскрывает подразделы, посетителю нужны различимые действия, а не один непредсказуемый клик

Для длинного списка согласуйте, как добраться до последней ссылки на невысоком экране — наличие пункта в HTML не помогает, если панель обрезает его за границей

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

## Как различить два распространённых типа меню

### Список, который раскрывается в странице

Кнопка показывает навигационные ссылки под шапкой или рядом с ней — содержимое страницы остаётся частью обычного маршрута чтения и управления

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

При закрытии скрытые ссылки должны исчезать не только визуально, но и из обычного клавиатурного пути — иначе человек будет переходить по элементам, которых не видит

### Модальная панель поверх содержимого

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

Фокус при открытии переносится внутрь панели, а Tab и Shift+Tab обходят доступные элементы внутри неё — после последнего элемента путь возвращается к первому

У модальной панели нужен доступный способ закрытия — в паттерне диалога клавиша Escape закрывает окно — после закрытия без перехода фокус обычно возвращается к кнопке открытия

Заранее выберите, какой из этих вариантов реализован — от него зависит ожидаемый результат проверки — одинаковая иконка с тремя полосками может открывать оба варианта


![Генеративная иллюстрация: раскрытая навигационная панель на телефоне](/blog/_media/m7-20261031/m24-cover-091e3e8628d8.webp)

Генеративная иллюстрация KEIVO — вымышленный интерфейс, не снимок клиентского сайта и не результат измерения



## Что проверить пальцем на телефоне

Откройте меню обычным касанием — кнопка должна быть различима и доступна, в том числе после появления баннера согласия или закреплённой панели

Выберите пункт, который ведёт на другую страницу — проверьте итоговый адрес и возможность продолжить чтение после перехода

Затем проверьте ссылку на раздел той же страницы, если она есть — панель не должна оставаться поверх выбранного содержимого

Закройте меню предусмотренным способом и откройте снова — отдельно проверьте поворот телефона и смену ширины окна, чтобы не осталось блокировки прокрутки от прежнего состояния

Согласуйте, закрывается ли панель касанием снаружи — у модального диалога отдельно проверьте Escape и возврат фокуса по клавиатурному сценарию ниже

## Что проверить с клавиатуры

Для первого прохода откройте сайт на компьютере в узком окне — уберите мышь из сценария и нажимайте Tab до кнопки меню

Фокус — это текущий выбранный для клавиатурного управления элемент — его должно быть видно по рамке или другому различимому оформлению, чтобы не угадывать положение по числу нажатий

Активируйте обычную HTML-кнопку клавишей Enter, затем закройте меню и повторите открытие пробелом — [паттерн disclosure W3C WAI](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) описывает оба способа активации кнопки

Дальше нажимайте Tab и читайте подписи элементов по порядку — на обычной ссылке Enter должен выполнить переход — Shift+Tab позволяет проверить обратный путь

Не требуйте стрелок для обычного списка ссылок только из-за названия «меню» — у сложного ARIA-меню другая модель управления, которую не следует случайно навязывать навигации сайта




| Шаг | Клавиша или действие | Обычное раскрытие | Модальная панель |
|---|---|---|---|
| Найти кнопку | Tab | Кнопка имеет понятное имя и видимый фокус | То же |
| Открыть | Enter, отдельным проходом Space | Ссылки раскрыты, путь продолжается к ним | Фокус переносится внутрь панели |
| Пройти вперёд | Tab | Ссылки, затем следующие элементы страницы | После последнего элемента возврат к первому внутри панели |
| Пройти назад | Shift+Tab | Обратный порядок по странице | Обратный порядок внутри панели |
| Выполнить переход | Enter на ссылке | Открыт правильный адрес или раздел | Переход выполнен, закрытая панель не блокирует новый экран |
| Закрыть без перехода | Кнопка закрытия, для модального диалога также Escape | Поведение соответствует выбранному раскрытию | Панель закрыта, фокус возвращён к доступному элементу вызова |




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

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

Затем закройте меню и снова пройдите Tab — закрытые пункты не должны появляться в маршруте между видимыми элементами — эту ошибку легко пропустить при проверке одной мышью

## Какие детали разметки стоит проверить разработчику

Открытие списка — действие кнопки, переход к адресу — действие ссылки — визуально похожие элементы должны сохранять соответствующее назначение в разметке

У кнопки раскрытия нужно корректно сообщать открытое состояние — в распространённом disclosure-паттерне для этого используется `aria-expanded`

Обычной навигации сайта не требуется роль ARIA `menu` только из-за слова «меню» — [пример W3C WAI объясняет это различие](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/)

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

Для модальной панели ориентируйтесь на отдельный [паттерн диалогового окна W3C WAI](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) — он предполагает другую работу с фокусом и недоступность содержимого за диалогом для взаимодействия

### Как связать разметку с видимым состоянием

У раскрывающей кнопки сравните объявленное состояние и реальную панель — при открытом содержимом `aria-expanded` должно сообщать `true`, при закрытом — `false`

Если используется `aria-controls`, его значение должно ссылаться на существующий уникальный идентификатор управляемой области — произвольная строка без такого элемента не описывает связь

Эти атрибуты не выполняют открытие и закрытие вместо кода — видимость, доступность ссылок и объявленное состояние должны изменяться согласованно

Учебное замечание: панель визуально закрыта, но её ссылки всё ещё доступны обычным Tab — одного правильного `aria-expanded="false"` недостаточно, нужно проверить фактическое скрытие содержимого

Такую ошибку можно передать исполнителю без назначения конкретной библиотеки — в задаче уже есть состояние, наблюдение и ожидаемый результат

## Как записать состояния для приёмки




| Состояние | Действие | Что проверить |
|---|---|---|
| Закрыто | Дойти до кнопки и открыть | Название, видимый фокус, реакцию на активацию |
| Открыто | Пройти все пункты | Доступность последней ссылки и отсутствие перекрытий |
| Переход | Выбрать внешний для страницы раздел | Правильный адрес и пригодность новой страницы |
| Якорь | Перейти к блоку этой страницы | Блок виден, панель не закрывает содержимое |
| Закрытие | Использовать согласованный способ | Фокус и прокрутка восстановлены по сценарию |
| Изменение экрана | Повернуть телефон или расширить окно | Не остаётся невидимый блокирующий слой |




Здесь нет требования реализовать все возможные способы закрытия — матрица помогает проверить выбранный вариант и заметить противоречия

## Как проверить ссылки и длинную панель

### Как проверить адрес каждого пункта

В рабочем файле заведите две колонки: подпись и ожидаемая цель — для страницы укажите полный адрес, для якоря название нужного блока

Откройте каждый пункт и сравните результат с этой таблицей — ссылка «Условия» может технически работать, но вести на старую страницу с другими условиями

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

Проверьте активное состояние — после перехода в раздел навигация должна помогать понять, где человек находится — отметка «текущий раздел» не должна оставаться на прежнем пункте

### Как проверить длинную панель

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

Если внутри панели есть поиск, вызовите экранную клавиатуру и повторите этот путь — если поиска нет, искусственно добавлять его в сценарий не требуется

Поверните телефон, затем вернитесь к исходной ориентации — после перестроения меню не должно оставлять невидимый слой, который перехватывает касания

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

## Заполненный пример проверки двух сбоев

Рассмотрим учебную навигацию мастерской с пунктами «Ремонт», «Условия» и «Памятка» — меню сделано модальной панелью

Проверяющий открывает панель клавишей Enter, проходит пункты Tab и выбирает «Условия» — содержимое нужного раздела видно, но колесо и жест прокрутки не двигают страницу

Вторая проверка начинается заново — проверяющий открывает панель и нажимает Escape — меню скрывается, но видимый фокус не возвращается на кнопку, а следующее нажатие Tab начинает неожиданный путь




| Замечание | Что подтверждено | Что проверить разработчику | Как закрыть задачу |
|---|---|---|---|
| После якорного перехода нет прокрутки | Шаги повторяются на выбранном телефоне и в узком Chrome | Снимается ли блокировка страницы при переходе | Повторить якорь, обычную ссылку и закрытие без перехода |
| После Escape потерян фокус | Панель закрыта, кнопка открытия не получила фокус | Куда возвращается фокус и существует ли элемент вызова | Проверить возврат, видимое выделение и дальнейший Tab |




У этих ошибок разные условия завершения — исправление блокировки прокрутки не подтверждает, что восстановлен клавиатурный путь

К каждой строке приложите последовательность и условия — для второй проблемы полезна запись с видимым фокусом, а не только снимок уже закрытого меню

### Как оформить результат повторной проверки

В учебном журнале после исправления создаются две отдельные записи — по M-1 проверены якорь, обычная ссылка и закрытие без перехода, по M-2 проверены Escape, возврат фокуса и следующий Tab

Если первое замечание перестало воспроизводиться, а второе сохранилось, закрывайте только M-1 — эти результаты не противоречат друг другу, они относятся к разным частям поведения

В итоговой записи укажите версию, условия и реальный результат — фраза «меню проверено» без списка состояний не показывает, что именно было принято

## Как отделить ошибку ссылки от ошибки панели

Учебная ситуация: меню открывается, но пункт «Материалы» ведёт на отсутствующий адрес — проблема находится в цели ссылки, а повторная анимация панели её не исправит

Другой случай: адрес правильный, но после перехода по якорю страница остаётся заблокированной для прокрутки — здесь нужно проверить жизненный цикл открытого состояния

Запишите оба дефекта отдельными строками — у них разные способы приёмки, даже если посетитель описывает всё одной фразой «меню не работает»

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

## Как проверить исправление после публикации

Прежде чем закрывать замечания, проверьте ещё три ситуации — они показывают, не привязано ли исправление только к одному входу на страницу

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

Вторая — повторное открытие меню после закрытия — состояние кнопки, доступность ссылок и блокировка фона должны соответствовать текущему виду панели

Третья — другой адрес с той же шапкой — если навигация общая, исправление не заканчивается проверкой одной статьи

Для проверки с программой чтения с экрана понадобится отдельный проход на выбранной связке браузера и вспомогательной технологии — клавиатурная проверка помогает найти часть проблем, но не заменяет этот проход

Пройдите меню с клавиатуры и на реальном телефоне — проверка только мышью не подтверждает эти способы управления

Если JavaScript не загрузился, согласованный базовый путь к разделам должен оставаться понятным — это может быть видимая навигация или другой предусмотренный fallback, а не обязательно та же анимация

Для остальной страницы используйте [план мобильной проверки](/blog/proverit-mobilnuyu-versiyu-sayta/), а поведение меню закрепите в [матрице адаптивной вёрстки](/blog/adaptivnaya-verstka-sayta/)

Объём frontend-доработок можно сопоставить с [описанием услуги вёрстки](/services/verstka/) — конкретная задача начинается с воспроизводимого сценария и выбранного поведения панели

[Скачать сценарий проверки меню](/materials/m7-proverka-menyu.md) — с состояниями, полями для адресов и отдельным проходом с клавиатуры

## Готово ли задание на меню




- [ ] Поведение согласовано


- [ ] Ссылки проверены


- [ ] Клавиатурный сценарий проверен


- [ ] Учтены соседние состояния






Текстовый список для проверки без интерактива: поведение панели, цели ссылок, клавиатура и фокус, прокрутка и изменение экрана — отметки не заменяют тест доступности

Источники проверены 31 октября 2026 года — матрица и учебные ситуации подготовлены редакцией KEIVO