Налаштування клавіатурної навігації на 1С-Бітрікс

Налаштування клавіатурної навігації в 1С-Bitrix

Клавіатурна навігація — це не лише про сліпих користувачів. Корпоративні користувачі, оператори call-центрів, люди з тимчасовими травмами рук активно використовують Tab для навігації по формах і сайтах. Якщо порядок Tab порушено або фокус невидимий — прямі втрати конверсії в B2B-сегменті. В Bitrix це найчастіше проявляється так: користувач натискає 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 в шаблонах Bitrix

Порядок Tab-фокусу визначається порядком елементів у DOM плюс атрибут tabindex. В Bitrix проблеми найчастіше виникають через:

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

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

Модальні вікна та фокус-пастка

Компоненти Bitrix активно використовують модальні вікна: швидкий перегляд товару, авторизація, вибір адреси доставки. Проблема: при відкритті модального вікна фокус повинен перейти в нього, а Tab не повинен виходити за межі модалки (focus trap). При закритті — фокус повертається на елемент, який відкрив модалку.

Стандартні компоненти Bitrix цього не роблять. Мінімальна реалізація 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/стрілками. Час проходження — реальний показник зручності.