Попробуйте оформить заказ на собственном сайте, не притрагиваясь к мыши — только клавишей Tab. У большинства магазинов на этом эксперименте начинается хаос: непонятно, где вы находитесь, рамка фокуса не видна, порядок перехода прыгает, а до кнопки «оформить» добраться почти невозможно. А ведь именно так пользуются сайтом люди с ограничениями и все, кто предпочитает клавиатуру.
Эта статья — о том, как настроить видимый фокус и доступность активного элемента в интерфейсе магазина на 1С-Битрикс: почему нельзя убирать рамку фокуса, как примирить её с дизайном через focus-visible, как выстроить порядок табуляции и проверить всё на своём шаблоне. Тема доступности тесно связана с удобством и конверсией, которыми мы занимаемся в рамках аудита и оптимизации.
Коротко
- Видимый фокус показывает, какой элемент активен, — без него навигация с клавиатуры невозможна.
- Главная ошибка — обнулять рамку фокуса ради «чистого дизайна»; это ломает доступность.
- focus-visible показывает индикатор только при навигации с клавиатуры и решает конфликт эстетики и доступности.
- Кастомные шаблоны 1С-Битрикс часто ломают фокус и порядок табуляции — проверять нужно свой шаблон, а не платформу.
Что такое фокус и зачем его видеть
Фокус — это состояние элемента, который в данный момент активен и получит действие при нажатии клавиши. Когда вы переходите по сайту клавишей Tab, фокус последовательно перемещается по ссылкам, кнопкам и полям. Видимый индикатор фокуса — обычно рамка или подсветка — показывает, где вы сейчас находитесь.
Без видимого фокуса клавиатурная навигация превращается в игру вслепую:
- Непонятно, где вы. Пользователь не видит, какой элемент активен, и не знает, что сработает при нажатии.
- Теряется ориентация. После нескольких нажатий Tab невозможно понять, докуда дошёл фокус.
- Действия становятся случайными. Enter нажимается вслепую, с непредсказуемым результатом.
Видимый фокус — не украшение, а базовое условие того, чтобы сайтом можно было пользоваться без мыши. Он требуется стандартами веб-доступности и помогает всем, кто работает с клавиатуры.
Кому нужна клавиатурная навигация
Легко решить, что доступность — узкая тема «для инвалидов», и отмахнуться. На деле круг тех, кому нужна корректная навигация с клавиатуры, гораздо шире, чем кажется.
- Люди с нарушениями зрения. Пользуются скринридерами и клавиатурой вместо мыши.
- Люди с моторными ограничениями. Для кого точное движение мышью затруднено.
- Опытные пользователи. Многие быстрее работают с клавиатуры, особенно в формах и поиске.
- Ситуативные ограничения. Сломанная мышь, тачпад в дороге, временная травма руки.
Кроме того, во многих сферах доступность становится юридическим требованием, а не пожеланием. Так что корректный фокус — это и этика, и расширение аудитории, и снижение рисков.
Главная ошибка: обнулённый фокус
Самая распространённая и самая вредная ошибка в вёрстке — полное удаление индикатора фокуса ради эстетики. Стандартная браузерная обводка кажется дизайнерам некрасивой, и в стилях появляется правило, которое обнуляет её у всех элементов. Результат — визуально «чисто», а сайтом невозможно пользоваться с клавиатуры.
Проблема в том, что дизайнер и разработчик тестируют сайт мышью и просто не видят последствий. Обнулённый фокус незаметен, пока вы не отложите мышь. Поэтому правило простое: индикатор фокуса можно менять, но нельзя убирать. А чтобы он не мешал при кликах мышью, используют современный механизм focus-visible.
focus-visible: примирение дизайна и доступности
Долгое время существовал реальный конфликт: обычное состояние фокуса срабатывает при любом получении фокуса, в том числе при клике мышью. Из-за этого рамка появлялась даже там, где пользователю мыши она не нужна, и дизайнеры хотели её убрать — ломая доступность.
Псевдокласс focus-visible решает этот конфликт. Браузер сам определяет, когда индикатор действительно нужен:
| Способ взаимодействия | Обычный focus | focus-visible |
|---|---|---|
| Навигация с клавиатуры | Показывает рамку | Показывает рамку |
| Клик мышью | Показывает рамку | Обычно скрывает |
| Восприятие дизайнерами | «Мешает» | Незаметно при мыши |
| Доступность | Сохранена, но её убирают | Сохранена и никому не мешает |
С focus-visible индикатор виден тем, кто идёт с клавиатуры, и не появляется при кликах мышью. Старый повод убирать фокус исчезает — можно сделать и красиво, и доступно одновременно.
Как оформить видимый фокус правильно
Переоформить фокус в стиле сайта несложно, если следовать нескольким принципам. Цель — сделать индикатор заметным и аккуратным, а не невидимым.
- Не удаляйте, а заменяйте. Вместо обнуления обводки задайте свой стиль индикатора в духе сайта.
- Обеспечьте контраст. Индикатор должен быть заметен на любом фоне, включая тёмные и цветные блоки.
- Используйте focus-visible. Показывайте акцентный стиль при навигации с клавиатуры, не мешая кликам мышью.
- Не полагайтесь только на цвет. Рамка, тень или подчёркивание надёжнее, чем едва заметная смена оттенка.
- Проверьте на всех элементах. Ссылки, кнопки, поля, чекбоксы, кастомные компоненты — фокус нужен везде.
Аккуратно оформленный фокус выглядит как часть дизайна, а не как чужеродная браузерная рамка, — и при этом полностью выполняет свою функцию.
Порядок табуляции
Видимого фокуса мало — важно, чтобы он двигался в логичном порядке. Когда пользователь нажимает Tab, переход должен идти естественно: сверху вниз, слева направо, повторяя визуальную логику страницы. Хаотичные прыжки фокуса дезориентируют не хуже его отсутствия.
Что важно для правильного порядка:
- Порядок в разметке. Табуляция по умолчанию идёт по порядку элементов в коде — держите его совпадающим с визуальным.
- Осторожность с перестановками. Визуальные сдвиги стилями не должны рассинхронизировать порядок фокуса с картинкой.
- Логичные группы. Меню, фильтр, карточка проходятся как связные блоки, а не вперемешку.
- Пропуск к контенту. Ссылка «перейти к содержимому» экономит пользователю десятки нажатий через шапку.
Фокус в динамических элементах
Отдельная зона внимания — интерактивные элементы, которые появляются и исчезают: модальные окна, выпадающие меню, всплывающие корзины, фильтры. Здесь фокусом нужно управлять осознанно, иначе пользователь клавиатуры «проваливается» в невидимое.
- Перевод фокуса при открытии. Когда открывается модальное окно, фокус переходит внутрь него, а не остаётся на странице позади.
- Удержание фокуса. Пока модальное окно открыто, Tab не должен уводить фокус на скрытый за ним контент.
- Возврат при закрытии. После закрытия фокус возвращается на элемент, который окно открыл.
- Закрытие по Escape. Стандартное ожидание — закрыть всплывающее клавишей Escape.
Динамика — самая частая точка провала доступности, потому что её сложнее заметить и легче сломать при доработках интерфейса.
Доступность в шаблонах 1С-Битрикс
Стандартные компоненты 1С-Битрикс в целом дают базовую доступность: семантическую разметку, работающий фокус, корректные ссылки и кнопки. Проблемы почти всегда приходят из кастомизаций — собственных шаблонов, доработок и сторонних решений.
Типичные места, где доступность ломается:
- Кастомный CSS. Глобальное обнуление фокуса ради дизайна — самая частая беда кастомных тем.
- Переопределённые компоненты. Доработка вёрстки умного фильтра, каталога или корзины, ломающая фокус и порядок.
- Кастомные скрипты. Самописные выпадашки и модальные окна без управления фокусом.
- Сторонние решения. Готовые шаблоны и модули с Маркетплейса разного качества по доступности.
Вывод: нельзя полагаться на то, что «Битрикс всё сделал сам». Проверять доступность нужно именно на своём шаблоне и своих доработках. Об аккуратной кастомизации без поломки штатного поведения мы пишем в статьях про разработку модуля 1С-Битрикс и решения для Маркетплейса.
Ключевые сценарии магазина
В интернет-магазине есть несколько сценариев, где доступность фокуса особенно важна, потому что они ведут к деньгам. Их проверяют в первую очередь.
- Поиск и подсказки. Ввод запроса и выбор из автодополнения должны работать с клавиатуры.
- Умный фильтр. Чекбоксы, диапазоны и применение фильтра — доступны и с видимым фокусом.
- Карточка и выбор варианта. Выбор размера, цвета и добавление в корзину проходятся клавиатурой.
- Оформление заказа. Самый критичный сценарий: все поля, шаги и кнопка оформления доступны по порядку.
Если хотя бы один из этих сценариев не проходится с клавиатуры, часть пользователей просто не сможет купить — это прямая потеря конверсии, а не абстрактная доступность. А поскольку каталог и оформление заказа опираются на данные из 1С, качество витрины держится и на порядке в учёте: его мы наводим услугами автоматизации на 1С и автоматизации продаж и склада.
Как проверить фокус на своём сайте
Хорошая новость: базовую проверку доступности фокуса можно провести самостоятельно за несколько минут, без специальных инструментов.
- Отложите мышь. Пройдите сайт только клавишей Tab, как это делают пользователи клавиатуры.
- Следите за видимостью. На каждом шаге должно быть ясно, какой элемент активен.
- Проверьте порядок. Переход должен идти логично, без хаотичных прыжков по странице.
- Пройдите ключевые сценарии. Поиск, фильтр, карточка, добавление в корзину, оформление заказа.
- Проверьте динамику. Откройте и закройте модальные окна и меню, следя за поведением фокуса.
Любое место, где фокус исчез, потерялся или прыгнул нелогично, — это дефект доступности. Такой ручной проход дополняют автоматическими проверками и тестированием со скринридером, но клавиатурный тест ловит большинство проблем сразу.
Частые ошибки доступности
- Обнулённый фокус. Глобальное правило убирает обводку у всех элементов ради «чистого дизайна».
- Фокус только по цвету. Едва заметная смена оттенка вместо чёткой рамки или тени.
- Хаотичный порядок табуляции. Фокус прыгает по странице вопреки визуальной логике.
- Ловушка фокуса. В модальном окне или виджете невозможно выйти клавиатурой.
- Недоступная динамика. Всплывающие меню и корзина не управляются с клавиатуры.
- Тестирование только мышью. Разработчик не видит проблем, потому что не пробует клавиатуру.
- Надежда на платформу. Считают, что Битрикс сделал доступность сам, и не проверяют кастомный шаблон.
Чек-лист внедрения
- Фокус не обнулён. Нигде нет глобального удаления индикатора фокуса.
- Индикатор заметен. Видимый контрастный стиль фокуса на всех интерактивных элементах.
- Используется focus-visible. Акцентный фокус при клавиатуре, не мешающий кликам мышью.
- Порядок табуляции логичен. Переход идёт сверху вниз и слева направо, без прыжков.
- Динамика под контролем. Модальные окна и меню корректно управляют фокусом и закрываются по Escape.
- Ключевые сценарии доступны. Поиск, фильтр, карточка и оформление проходятся с клавиатуры.
- Проверено на своём шаблоне. Тест не на демо Битрикса, а на реальной витрине с доработками.
- Есть регулярная проверка. Клавиатурный проход входит в приёмку изменений интерфейса.
Вывод
Видимый фокус — базовое условие того, чтобы магазином можно было пользоваться без мыши, а значит, чтобы им могли пользоваться все. Главная ошибка — убирать индикатор фокуса ради эстетики; современный механизм focus-visible снимает этот повод, позволяя сделать интерфейс и красивым, и доступным одновременно.
Начните с самого результативного шага: пройдите сайт клавиатурой, восстановите видимый фокус там, где он потерян, и выстройте логичный порядок табуляции на ключевых сценариях — поиске, фильтре, карточке, оформлении. Помните, что кастомные шаблоны 1С-Битрикс чаще ломают доступность, чем сама платформа, поэтому проверять нужно свою витрину. Доступный фокус — это и этика, и расширение аудитории, и прямая защита конверсии.
