Keyboard navigation

Headroom.js — это лёгкая библиотека для управления видимостью элементов при прокрутке страницы, чаще всего используется для фиксированных шапок. Помимо стандартного поведения при скролле, важно учитывать взаимодействие с клавиатурой, особенно для доступности и UX на устройствах без мыши.

Поддержка фокуса и клавиатурных событий

Эффективная навигация с клавиатуры в Headroom.js строится на обработке событий focus, blur и keydown. Основная идея — синхронизировать видимость шапки с действиями пользователя через клавиши:

  • Tab / Shift+Tab — перемещение между интерактивными элементами на странице.
  • Arrow Up / Arrow Down — возможная имитация прокрутки для управления поведением шапки.
  • Enter / Space — активация элементов, потенциально вызывающих изменения состояния шапки.
const header = document.querySelector('header');
const headroom = new Headroom(header);
headroom.init();

// Обработка клавиатурной навигации
header.addEventListener('keydown', (e) => {
    switch (e.key) {
        case 'ArrowUp':
            headroom.pin(); // закрепляем шапку при движении вверх
            break;
        case 'ArrowDown':
            headroom.unpin(); // скрываем шапку при движении вниз
            break;
    }
});

События фокуса

Для пользователей клавиатуры критически важно, чтобы элементы шапки оставались доступными при фокусе. Headroom.js позволяет динамически фиксировать шапку при фокусе на интерактивном элементе, предотвращая её исчезновение при прокрутке:

const interactiveElements = header.querySelectorAll('a, button, input');

interactiveElements.forEach(el => {
    el.addEventListener('focus', () => headroom.pin());
    el.addEventListener('blur', () => headroom.unpin());
});

Ключевой момент: использование pin() при focus гарантирует, что меню, кнопки и поля ввода остаются видимыми для пользователя клавиатуры.

Настройка задержек и минимальной высоты

Headroom.js поддерживает опции tolerance и offset, которые влияют на чувствительность к прокрутке. Для клавиатурной навигации стоит учитывать, что быстрая прокрутка с клавиатуры может привести к нежелательному скрытию шапки. Рекомендуется:

const options = {
    tolerance: {
        up: 5,
        down: 5
    },
    offset: 50,
    onPin: () => console.log('header pinned'),
    onUnpin: () => console.log('header unpinned')
};

const hr = new Headroom(header, options);
hr.init();

Значение tolerance в диапазоне 5–10 пикселей минимизирует срабатывания при небольших изменениях прокрутки с клавиатуры.

Адаптация для модальных окон и выпадающих меню

При открытии модальных окон или выпадающих меню важно блокировать автоматическое скрытие шапки:

const modal = document.querySelector('.modal');

modal.addEventListener('open', () => headroom.pin());
modal.addEventListener('close', () => headroom.unpin());

Также полезно временно отключать автоматическое скрытие при активном focus внутри модального окна, чтобы клавиатурная навигация не столкнулась с исчезающим интерфейсом.

Управление скроллом с клавиатуры и доступность

Для полной доступности стоит учитывать:

  • Прокрутка с помощью клавиш Page Up / Page Down и Arrow Up / Down. Можно добавить обработчики scroll вместе с Headroom.js для плавного управления шапкой.
  • Фокус должен оставаться видимым при автоматическом скрытии шапки (pin() и unpin() вызываются в зависимости от положения прокрутки и активности клавиатуры).
  • Для пользователей экранных читалок шапка должна быть всегда доступна и иметь правильные атрибуты ARIA (role="banner", aria-hidden при скрытии и т.п.).
window.addEventListener('scroll', () => {
    const focusedElement = document.activeElement;
    if (header.contains(focusedElement)) {
        headroom.pin(); // предотвращение скрытия шапки при активном фокусе
    }
});

Практические рекомендации

  1. Всегда закреплять шапку при фокусе на интерактивных элементах.
  2. Настраивать tolerance и offset для более плавного взаимодействия с клавиатурой.
  3. Интегрировать обработку событий клавиатуры с модальными окнами и выпадающими меню.
  4. Проверять поведение на разных браузерах и устройствах без мыши.
  5. Использовать события onPin и onUnpin для кастомных эффектов при навигации клавиатурой.

Хотите, я могу написать следующую главу с примерами доступного управления Headroom.js с помощью клавиш Tab и стрелок, где будет полный рабочий пример с меню и модальными окнами?

Оглавление