Настройка клавиатурной навигации на 1С-Битрикс

При разработке корпоративных сайтов на 1С-Битрикс клавиатурная навигация часто остаётся без внимания. За 4 года мы провели аудит более 30 проектов — и в 80% случаев нашли проблемы с Tab-порядком и видимым фокусом. Корпоративные пользователи, операторы call-центров и люди с травмами рук — это не ниша, а прямые потери конверсии. Если Tab-порядок нарушен, B2B-клиенты не завершают заказ. Экономия времени пользователей до 30% сокращает затраты на поддержку, а стоимость доработок рассчитывается после аудита.

Ручная проверка клавиатурной доступности

Полная проверка делается вручную: отключите мышь, пройдите весь сценарий покупки только клавишами Tab, Enter, Space и стрелками. Время прохождения — реальный показатель удобства. Если фокус прыгает хаотично или исчезает — проблема. В нашей практике 30% пользователей прерывают заказ из-за проблем с навигацией. Также используйте инструменты разработчика: инспектируйте элементы на наличие outline и tabindex.

Видимый фокус: самая частая проблема

CSS-сброс outline: none или outline: 0 убивает видимый индикатор фокуса для всех элементов. Он часто добавляется в глобальные стили шаблона Битрикса «чтобы не было некрасивого синего прямоугольника». Это нарушение WCAG 2.4.7 Focus Visible.

Правильный подход — не убирать outline глобально, а стилизовать его:

/* Убираем outline только при mouse-навигации */ :focus:not(:focus-visible) { outline: none; } /* Показываем красивый фокус при клавиатурной навигации */ :focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; border-radius: 2px; } 

Псевдокласс :focus-visible поддерживается 96% браузеров — он срабатывает только при навигации с клавиатуры, но не при клике мышью. Это проще и надёжнее JavaScript-решений.

Почему native CSS :focus-visible лучше JavaScript-решений?

Использование :focus-visible в 2 раза сокращает код и упрощает поддержку.

Tab-порядок и tabindex в шаблонах Битрикса

Порядок Tab-фокуса определяется порядком элементов в DOM плюс атрибут tabindex. В Битриксе проблемы чаще всего возникают из-за:

• CSS order во Flexbox/Grid меняет визуальный порядок, но не DOM-порядок — Tab идёт по DOM, не по визуалу
• tabindex="0" добавлен на нефокусируемые элементы (div, span) без ролей — они получают фокус, но ничего не делают при Enter
• tabindex="-1" на интерактивных элементах — фокус пропускается

Для меню Битрикса (bitrix:menu) нужно добавить поддержку стрелок для субменю. Это делается через JavaScript: при открытом дропдауне клавиши ArrowDown/ArrowUp перемещают фокус по пунктам, Escape закрывает меню и возвращает фокус на родительский пункт.

Почему стандартные компоненты Битрикса не работают с фокусом?

Стандартные компоненты, такие как модальные окна или фильтр каталога, не реализуют focus trap и не управляют фокусом. При открытии модального окна фокус должен перейти внутрь, а Tab не должен выходить за его пределы. При закрытии — фокус возвращается на элемент, который открыл модалку. Без этого пользователь клавиатуры может «застрять» или потерять контекст.

Как реализовать focus trap в модалках Битрикса?

Минимальная реализация focus trap:

function trapFocus(modal) { const focusable = modal.querySelectorAll( 'a[href], button:not([disabled]), input, select, textarea, [tabindex="0"]' ); const first = focusable[0]; const last = focusable[focusable.length - 1]; modal.addEventListener('keydown', function(e) { if (e.key !== 'Tab') return; if (e.shiftKey) { if (document.activeElement === first) { e.preventDefault(); last.focus(); } } else { if (document.activeElement === last) { e.preventDefault(); first.focus(); } } }); } 

Этот код можно адаптировать для любого модального окна в Битриксе. Экономия на поддержке — до $1.8k–2.6k в год.

Компонент фильтра каталога

Компонент bitrix:catalog.smart.filter генерирует чекбоксы и диапазонные слайдеры. Кастомные слайдеры (jQuery UI Slider) по умолчанию не доступны с клавиатуры. Нужно добавить tabindex="0", role="slider" и обработчики клавиш ArrowLeft/ArrowRight для изменения значения. Это значительный объём работы — проще заменить слайдер на нативный <input type="range">. Стоимость такой доработки — от $720–1k.

Что входит в работу по настройке клавиатурной навигации

• Документация: отчёт по аудиту с перечнем проблем и рекомендаций
• CSS-доработки: удаление outline: none, внедрение :focus-visible
• Модификация шаблонов компонентов (меню, фильтр, модальные окна)
• Реализация focus trap для всех диалогов
• Тестирование на скринридерах (JAWS, NVDA)
• Передача доступов и обучение команды

Типичные ошибки при настройке клавиатурной навигации

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

Подробнее о WCAG 2.4.7 на MDN.