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

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

Клавиатурная навигация — это не только про слепых пользователей. Корпоративные пользователи, операторы call-центров, люди с временными травмами рук активно используют Tab для навигации по формам и сайтам. Если Tab-порядок нарушен или фокус невидим — это прямые потери конверсии в B2B-сегменте. В Битриксе это чаще всего проявляется так: пользователь нажимает Tab на странице оформления заказа, фокус прыгает в случайном порядке или вообще уходит в невидимую часть страницы.

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

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 поддерживается всеми современными браузерами — он срабатывает только при навигации с клавиатуры, но не при клике мышью.

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 закрывает меню и возвращает фокус на родительский пункт.

Модальные окна и фокус-ловушка

Компоненты Битрикса активно используют модальные окна: быстрый просмотр товара, авторизация, выбор адреса доставки. Проблема: при открытии модального окна фокус должен перейти в него, а 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();
            }
        }
    });
}

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

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

Тестирование

Полная проверка клавиатурной навигации делается вручную: отключить мышь, пройти весь сценарий покупки только Tab/Enter/Space/стрелками. Время прохождения — реальный показатель удобства.