Попробуйте прямо сейчас убрать руку с мыши и пройти по своему магазину только клавишей Tab: от главной до оформления заказа. У многих сайтов этот эксперимент заканчивается быстро — фокус исчезает из виду, проваливается в невидимые элементы, застревает в меню или не может закрыть всплывшее окно. А ведь для части ваших посетителей клавиатура — единственный способ пользоваться сайтом.
Эта статья — практический разбор, как обеспечить навигацию с клавиатуры в интернет-магазине на 1С-Битрикс: видимый фокус, логичный порядок обхода, доступные фильтр, модалки и оформление заказа, правильная семантика и ARIA. Доступность — часть общего качества магазина, наравне с его связкой с учётом и автоматизацией на 1С: и то, и другое про то, чтобы клиент дошёл до покупки без препятствий.
Коротко
- Клавиатурой пользуются не только люди с ограничениями — это ещё и признак качественной вёрстки.
- Никогда не убирайте видимый фокус: без него человек не понимает, где находится на странице.
- Фильтр, модалки и оформление заказа должны полностью работать без мыши, с корректным управлением фокусом.
- Правильная семантика и ARIA дают доступность и заодно улучшают SEO; проверяется всё табом и скринридером.
Почему это важно
Доступность с клавиатуры — не «галочка для галочки», а вопрос охвата и качества. Недоступный магазин теряет часть покупателей буквально: человек не может завершить заказ, потому что кнопку «купить» нельзя нажать без мыши. Это прямые упущенные продажи, о которых вы даже не узнаете из аналитики.
Есть и второй, менее очевидный эффект: возможность пройти сайт с клавиатуры — базовый маркер качества вёрстки. Если по магазину нельзя нормально пройти табом, почти наверняка там же проблемы с семантикой, а значит и с SEO, и с поддерживаемостью кода. Доступность вытягивает общее качество фронтенда вверх, а не только помогает конкретной группе людей.
Кто ходит по сайту с клавиатуры
Полезно понимать аудиторию, ради которой это делается, — она шире, чем кажется:
- Люди с нарушениями зрения. Пользуются скринридерами, которые управляются с клавиатуры.
- Люди с нарушениями моторики. Для кого мышь физически неудобна или недоступна.
- Опытные пользователи. Те, кто работает быстро и без мыши по привычке.
- Временные ограничения. Травма руки, сломанная мышь, неудобное устройство.
Ни одну из этих групп не стоит списывать со счетов. Вместе они образуют заметную долю аудитории, и каждая из них — потенциальный покупатель, которого недоступный магазин отталкивает.
Видимый и логичный фокус
Фундамент клавиатурной навигации — фокус. Это подсветка элемента, на котором сейчас «стоит» клавиатура: ссылки, кнопки, поля ввода. По ней пользователь понимает, куда он попадёт, нажав Enter. Убрать видимый фокус — всё равно что убрать курсор мыши: человек мгновенно теряется.
Кроме видимости важна логичность: фокус должен двигаться по странице предсказуемо и не проваливаться в скрытые или выключенные элементы. Если по Tab фокус прыгает хаотично или уходит в невидимую область, навигация ломается, даже когда обводка на месте.
Порядок обхода и структура
Клавиша Tab ведёт пользователя по интерактивным элементам в определённом порядке, и этот порядок должен совпадать с визуальной логикой страницы: слева направо, сверху вниз, как читает человек. Если порядок обхода противоречит расположению элементов, пользователь дезориентирован.
Хорошая новость: правильный порядок обхода почти бесплатно получается из грамотной семантической разметки. Когда элементы идут в коде в логичном порядке и используются правильные теги, Tab обходит их естественно. Проблемы начинаются там, где порядок «чинят» вручную или ломают сложной динамической вёрсткой. Основные клавиши навигации стоит держать в голове:
| Клавиша | Действие |
|---|---|
| Tab | Перейти к следующему интерактивному элементу |
| Shift + Tab | Вернуться к предыдущему элементу |
| Enter | Активировать ссылку или кнопку |
| Space | Нажать кнопку, отметить чекбокс, прокрутить |
| Esc | Закрыть модальное окно или выпадающий список |
| Стрелки | Перемещение внутри меню, вкладок, слайдера |
Ссылка «пропустить к контенту»
На каждой странице магазина в начале обычно идёт шапка с логотипом, меню, поиском и корзиной — десятки ссылок. Пользователю клавиатуры не хочется на каждой странице протабывать всё это, чтобы добраться до товара. Решение — skip-link, «пропустить к основному содержимому».
Это первая по порядку обхода ссылка, обычно скрытая визуально и появляющаяся при получении фокуса. Нажав её, пользователь сразу перескакивает к основному контенту, минуя навигацию. Мелочь, которая экономит десятки нажатий на каждой странице и заметно облегчает жизнь тем, кто ходит по каталогу с клавиатуры. Реализуется парой строк в шаблоне и стоит того.
Каталог и фильтр с клавиатуры
Каталог и умный фильтр — сердце магазина, и именно здесь доступность чаще всего ломается. Штатный фильтр Битрикса даёт основу, но его интерактивные части почти всегда требуют проверки под клавиатуру:
- Доступность контролов. До каждого чекбокса, ползунка и кнопки можно добраться табом.
- Управление с клавиатуры. Значения переключаются клавишами, ползунок двигается стрелками.
- Понятность результата. После применения фильтра фокус не теряется, а обновление выдачи объявляется скринридеру.
- Логичный порядок. Обход идёт по группам характеристик, а не хаотично.
Кастомные интерактивные компоненты фильтра нередко приходится дорабатывать отдельно — это часть аккуратной фронтенд-разработки, смежная с темой разработки модуля Битрикс, где доступность закладывается на уровне компонента.
Карточка и добавление в корзину
Карточка товара — место решения о покупке, и с клавиатуры она должна работать безупречно. Ключевые интерактивные элементы: выбор варианта (размер, цвет), изменение количества, кнопка «в корзину», галерея фотографий. Все они обязаны быть доступны и понятны без мыши.
Особое внимание — выбору торговых предложений и кнопке покупки. Если вариант нельзя выбрать с клавиатуры или кнопка «купить» недостижима табом, покупатель просто не сможет оформить заказ. После добавления в корзину важно сообщить об этом так, чтобы пользователь скринридера понял: товар добавлен. Иначе действие происходит «в тишине», и человек не уверен, сработало ли оно.
Модалки и выпадающие меню
Всплывающие окна и выпадающие списки — классическое место, где клавиатурная навигация проваливается. Правила для доступной модалки:
- Ловушка фокуса. Пока окно открыто, фокус остаётся внутри него и не уходит на скрытую страницу под ним.
- Закрытие по Esc. Окно закрывается клавишей Esc, а не только кликом по крестику.
- Возврат фокуса. После закрытия фокус возвращается на элемент, который открыл окно.
- Управляемые выпадашки. Меню и списки открываются, обходятся стрелками и закрываются с клавиатуры.
Если этого нет, пользователь клавиатуры «проваливается» табом за пределы модалки и теряется на странице под ней. Быстрый просмотр товара, корзина, формы обратной связи — все всплывающие элементы магазина проверяют на эти правила.
Формы и оформление заказа
Оформление заказа — финальный и самый ценный путь, и его недоступность бьёт по продажам напрямую. Формы должны быть образцово доступны:
- Подписи полей. У каждого поля есть связанная подпись, которую озвучит скринридер.
- Понятные ошибки. Сообщения об ошибках доступны с клавиатуры и объявляются, а не только подсвечиваются цветом.
- Логичный порядок. Табом форма проходится сверху вниз без сюрпризов.
- Доступная оплата и доставка. Выбор способов работает без мыши.
Заказ проходит через статусы и уходит в учётную систему — за корректность этой части отвечает автоматизация продаж и склада на 1С. Но если до кнопки оформления нельзя добраться с клавиатуры, вся отлаженная логика заказа окажется бесполезной для части клиентов.
Семантика и ARIA
Большая часть доступности достигается не хитрыми приёмами, а честной семантической разметкой. Кнопка должна быть кнопкой, ссылка — ссылкой, заголовки — заголовками нужного уровня. Тогда браузер и скринридер понимают структуру страницы «из коробки», а Tab работает правильно сам собой.
ARIA-атрибуты дополняют семантику там, где стандартных тегов не хватает: помечают состояние (раскрыто/свёрнуто), роли сложных компонентов, живые области для объявления изменений. Важное правило — ARIA дополняет, а не заменяет семантику: сначала правильные теги, потом атрибуты. Бонусом корректная семантика улучшает и SEO, потому что поисковики тоже читают структуру страницы. Смежные технические аспекты фронтенда мы затрагиваем в материалах про архитектуру, например про REST и вебхуки в Битрикс для динамических частей интерфейса.
Тестирование доступности
Доступность нельзя «сделать и забыть» — её проверяют, и лучше регулярно. Практическая последовательность проверки:
- Пройдите ключевые пути табом. Главная, каталог, фильтр, карточка, корзина, оформление — только с клавиатуры.
- Следите за фокусом. Он всегда виден, движется логично, не проваливается в скрытое.
- Проверьте модалки. Ловушка фокуса, закрытие по Esc, возврат фокуса.
- Включите скринридер. Послушайте, понятны ли подписи, кнопки, ошибки и изменения.
- Прогоните автоматические проверки. Инструменты аудита ловят часть проблем семантики и контраста.
- Исправьте и повторите. Доступность поддерживают при каждом изменении шаблонов.
Частые ошибки
- Убрали видимый фокус. Ради «чистого» дизайна — и пользователь клавиатуры ослеп.
- Модалка без ловушки фокуса. Таб уводит на скрытую под окном страницу.
- Кнопки-невидимки для клавиатуры. «Кнопка» сделана из div без роли и недостижима табом.
- Хаотичный порядок обхода. Tab прыгает вопреки визуальной логике страницы.
- Ошибки только цветом. Красная рамка без текста и объявления бесполезна для скринридера.
- Нет skip-link. На каждой странице приходится протабывать всю шапку.
Чек-лист внедрения
- Фокус виден всегда. Обводка стилизована, но чётко заметна на всех элементах.
- Порядок обхода логичен. Tab идёт по странице так, как её читают.
- Skip-link есть. Первая ссылка ведёт к основному содержимому.
- Фильтр доступен. Контролы достижимы и управляются с клавиатуры, результат объявляется.
- Модалки корректны. Ловушка фокуса, Esc, возврат фокуса работают.
- Оформление проходимо. Формы, оплата и доставка работают без мыши, ошибки понятны.
- Семантика и ARIA на месте. Правильные теги, атрибуты дополняют, проверено скринридером.
Вывод
Навигация с клавиатуры — это не узкая функция для меньшинства, а базовый признак качественного магазина. Она расширяет аудиторию, вытягивает вверх качество вёрстки и семантики, помогает SEO и, в конечном счёте, приводит к покупке тех клиентов, которых недоступный сайт молча отталкивает.
Начните с простого: не убирайте видимый фокус, обеспечьте логичный порядок обхода и добавьте skip-link. Дальше приведите в порядок фильтр, модалки и оформление заказа, обопритесь на честную семантику и проверьте всё табом и скринридером. Это не разовая акция, а часть культуры разработки: заложенная в шаблоны и компоненты доступность окупается расширением круга покупателей и общим качеством магазина на 1С-Битрикс.
