Посетитель нажимает на строку «Каталог» и ожидает увидеть подразделы. Вместо этого открывается новая страница: список раскрывается только при попадании в маленькую стрелку справа. Обе функции могут быть нужны бизнесу, но их соседство ещё не объясняет человеку, куда нажимать.
Чтобы согласовать такое меню, полезно обсуждать действие каждой зоны и поведение после нажатия. Мы сделали учебное демо двух вариантов, схемы зон и перечень проверок. Демо показывает различия в управлении; пользовательское исследование и влияние на конверсию для него не измерялись.
Определите задачу строки: раскрыть список или открыть страницу
У раздела могут быть две разные задачи: показать вложенные ссылки на текущем экране и открыть обзорную страницу категории. Запишите обе отдельно. Затем решите, должны ли они находиться рядом или переход можно перенести внутрь раскрытого списка.
В нашем примере вариант A разделяет управление: подпись «Каталог» — ссылка, соседняя стрелка — кнопка раскрытия. В варианте B вся строка — кнопка раскрытия; ссылка «Все товары категории» находится внутри открытого списка. Посетителю не нужно различать действия подписи и стрелки в одной строке, чтобы раскрыть подразделы.
Второй вариант подходит для сценария, в котором человек сначала выбирает подраздел. Если важен прямой переход в обзор категории, отдельная ссылка рядом с кнопкой тоже может быть уместна. Тогда у элементов должны быть различимые границы, понятные названия и самостоятельные зоны нажатия.
Что действительно следует из исследования и стандартов
Исследование NN/g об обозначениях раскрывающихся разделов опубликовано в августе 2020 года. Авторы изучали первый клик в мобильной навигации на неинтерактивных прототипах. Среди рассмотренных обозначений направленная вниз стрелка лучше объясняла раскрытие на месте. Авторы также обращали внимание на путаницу, когда подпись и значок воспринимаются единым элементом, а выполняют разные действия.
Это полезное основание для гипотезы, а не доказательство того, что замена значка увеличит продажи конкретного магазина. Результат зависит от задачи, подписей, структуры каталога и привычек аудитории.
У WAI-ARIA Authoring Practices Guide есть как навигация с кнопками раскрытия, так и пример с отдельными ссылками верхнего уровня и соседними кнопками. Поэтому объявлять любую пару «ссылка + кнопка» запрещённой правилами доступности неверно. Для проекта нужно выбрать понятную модель и проверить её реализацию; примеры APG сами по себе не являются готовой проверенной заменой производственному компоненту.
Собственное демо: два варианта и наблюдаемое действие
В учебном примере можно переключить A/B, изменить ширину макета телефона и включить длинное название категории. Все страницы условные: переход по ссылке меняет учебный экран и запись на локальной доске действий. Демо ничего не продаёт, не отправляет формы и не собирает аналитику.
Архив демо находится в блоке «Файлы к материалу» в конце страницы. На компьютере распакуйте его целиком и откройте index.html: стили и скрипт должны остаться рядом. Интернет для работы примера не требуется. Инструкция и границы проверки включены в README.md.
Повторите одинаковую задачу: раскройте подразделы, перейдите в обзор категории, вернитесь и закройте список. В A сравните нажатие на подпись и на стрелку. В B нажмите на строку целиком, а затем на отдельную ссылку внутри. Доска действий позволяет увидеть, какой результат вызвал каждый шаг.
Обратите внимание на длинное название. Перенос текста не должен скрывать кнопку, перекрывать соседнюю зону или менять смысл действия. Увеличение текста и узкий экран проверяют отдельно от красивого макета на широком мониторе.
Согласуйте поведение клавиатуры и фокуса
Раскрытие списка выполняет кнопка, переход на страницу — ссылка. Это различие стоит сохранить и в HTML. Для обычной навигации сайта не нужно автоматически назначать роли menu и menubar: они подразумевают более сложную модель управления.
У кнопки раскрытия состояние aria-expanded должно совпадать с тем, что видно на экране. В нашем демо кнопка также связана с управляемым списком через aria-controls. Скрытые ссылки исключены из последовательности Tab. Enter и пробел переключают нативную кнопку; Enter активирует ссылку.
В демо Escape закрывает открытый список и возвращает фокус кнопке раскрытия. Это выбранное поведение навигационного примера. Его нельзя без уточнений превращать в требование ко всем аккордеонам и блокам FAQ.
Не добавляйте управление стрелками только ради сходства с меню настольного приложения. Для простого списка ссылок сначала проверьте обычный порядок Tab, заметный фокус и ожидаемые действия кнопок.
Размер зоны нажатия: зафиксируйте критерий проекта
В нашем основном варианте B высота кнопки раскрытия — не менее 56 CSS-пикселей. Это параметр учебного компонента, а не универсальная норма для любого сайта. В A самостоятельная кнопка стрелки имеет размер 36 × 36 CSS-пикселей: разницу можно увидеть в демо.
У WCAG 2.2, критерий 2.5.8 уровня AA, минимальный размер цели составляет 24 × 24 CSS-пикселя с предусмотренными исключениями, включая условия расстояния между целями. Размер 44 × 44 относится к расширенному критерию 2.5.5 уровня AAA. Выполнение одного размерного условия ещё не означает соответствия всего компонента WCAG.
Для приёмки задайте конкретную область нажатия, проверьте её на реальном устройстве и убедитесь, что соседние действия не перекрываются. Визуальный размер стрелки и размер активной кнопки могут различаться; измерять нужно именно цель нажатия.
Чек-лист приёмки для дизайнера и разработчика
| Проверка | Ожидаемый результат |
|---|---|
Нажать на подпись и на значок | Каждая зона выполняет согласованное действие; зоны не перекрываются |
Раскрыть и закрыть раздел | Видимое состояние и aria-expanded совпадают |
Пройти по элементам клавишей Tab | Порядок понятен, фокус заметен, скрытые ссылки пропускаются |
Нажать Enter и пробел на кнопке | Список переключается без непреднамеренного перехода |
Нажать Enter на ссылке | Открывается ожидаемое назначение |
Нажать Escape внутри открытого списка | Выполняется оговорённое поведение; в нашем демо фокус возвращается кнопке |
Включить длинное название и узкий экран | Текст переносится, кнопки остаются доступны, элементы не перекрываются |
Увеличить текст и проверить касание на устройстве | Содержание и управление остаются доступны; соседние цели различимы |
Этот список проверяет один компонент. Общие вопросы контраста, форм, альтернативного текста и других требований разобраны в материале о доступности сайта. Для целого пути до обращения полезен разбор мобильного UX услуг, а для выбора параметров товара — статья о фильтрах каталога.
Если остаются сомнения между моделями, дайте представителям аудитории конкретные задачи на прототипе и наблюдайте за действиями. Записывайте условия, ошибки и ожидания. Небольшой просмотр коллегами помогает найти вопросы, но его результаты не следует выдавать за доказанный рост продаж.
DDRW может помочь согласовать структуру навигации, подготовить прототип и критерии проверки в рамках проектирования UI/UX.
Текст и обложка подготовлены с помощью ИИ. Схемы и демо созданы для этого материала. Пример учебный, без клиентских данных; исследование пользователей, проверка всеми экранными дикторами и измерение конверсии не проводились.
