Фокус-менеджмент

Для начала работы с fullPage.js необходимо подключить библиотеку в проект. В HTML-документ добавляются стили и скрипт:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.28/fullpage.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.28/fullpage.min.js"></script>

Создаётся контейнер, в котором каждая секция страницы получает класс section:

<div id="fullpage">
    <div class="section">Первая секция</div>
    <div class="section">Вторая секция</div>
    <div class="section">Третья секция</div>
</div>

Инициализация выполняется через объект Fullpage:

const fullpageInstance = new fullpage('#fullpage', {
    autoScrolling: true,
    navigation: true,
    scrollingSpeed: 700
});

Ключевые параметры:

  • autoScrolling — включает вертикальную прокрутку секций с эффектом «листы».
  • navigation — отображает индикатор текущей секции справа.
  • scrollingSpeed — задаёт скорость анимации перехода между секциями.

Работа с фокусом в секциях

FullPage.js предоставляет возможность управлять фокусом при переходе между секциями. Для этого используются события жизненного цикла:

  • afterLoad(origin, destination, direction) — вызывается после завершения загрузки секции.
  • onLeave(origin, destination, direction) — вызывается при уходе с текущей секции.

Пример установки фокуса на элемент внутри секции после её активации:

new fullpage('#fullpage', {
    afterLoad: function(origin, destination, direction){
        const focusable = destination.item.querySelector('[tabindex]');
        if(focusable){
            focusable.focus();
        }
    }
});

Особенности фокус-менеджмента:

  • Фокус всегда должен оставаться внутри активной секции.
  • При программной смене секции рекомендуется явно задавать фокус, чтобы клавиатурная навигация оставалась корректной.
  • Для интерактивных элементов (button, input, a) рекомендуется использовать атрибут tabindex="0".

Ограничение фокуса внутри модальных элементов и секций

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

function trapFocus(element) {
    const focusableElements = element.querySelectorAll('a, button, input, textarea, select, [tabindex]:not([tabindex="-1"])');
    const firstEl = focusableElements[0];
    const lastEl = focusableElements[focusableElements.length - 1];

    element.addEventListener('keydown', function(e){
        if(e.key === 'Tab'){
            if(e.shiftKey){
                if(document.activeElement === firstEl){
                    e.preventDefault();
                    lastEl.focus();
                }
            } else {
                if(document.activeElement === lastEl){
                    e.preventDefault();
                    firstEl.focus();
                }
            }
        }
    });
    firstEl.focus();
}

Это гарантирует, что пользователь не сможет случайно переместить фокус за пределы активного блока.

Программное управление фокусом между секциями

FullPage.js предоставляет методы для программного перехода между секциями и слайдерами внутри секций:

  • fullpage_api.moveSectionUp() — переход к предыдущей секции.
  • fullpage_api.moveSectionDown() — переход к следующей секции.
  • fullpage_api.moveTo(section, slide) — переход к конкретной секции и слайду.

После программного перехода необходимо обновлять фокус:

fullpage_api.moveTo(3);
const section3 = document.querySelector('.section:nth-child(3)');
const focusable = section3.querySelector('[tabindex]');
if(focusable) focusable.focus();

Настройка tab-индекса для плавной навигации

Для корректного фокус-менеджмента в fullPage.js рекомендуется явно задавать tabindex интерактивным элементам:

  • tabindex="0" — элемент доступен через Tab.
  • tabindex="-1" — элемент исключён из последовательности Tab, но доступен программно через focus().
<div class="section">
    <button tabindex="0">Кнопка 1</button>
    <button tabindex="-1">Кнопка 2 (только программно)</button>
</div>

При смене секции можно динамически обновлять tabindex, чтобы только элементы текущей секции были фокусируемыми.

Взаимодействие с клавиатурой

FullPage.js поддерживает клавиатурную навигацию с помощью стрелок и Tab. Для полного контроля рекомендуется:

  • Отключать стандартный Tab для неактивных секций.
  • Использовать события onLeave и afterLoad для переназначения фокуса.
  • Для сложных интерактивных интерфейсов создавать собственные обработчики клавиатуры, предотвращающие уход фокуса за пределы активной области.
new fullpage('#fullpage', {
    keyboardScrolling: true,
    onLeave: function(origin, destination, direction){
        const focusables = origin.item.querySelectorAll('[tabindex]');
        focusables.forEach(el => el.setAttribute('tabindex', '-1'));
    },
    afterLoad: function(origin, destination, direction){
        const focusables = destination.item.querySelectorAll('[tabindex="-1"]');
        focusables.forEach(el => el.setAttribute('tabindex', '0'));
        const firstFocusable = destination.item.querySelector('[tabindex="0"]');
        if(firstFocusable) firstFocusable.focus();
    }
});

Слайдеры и фокус внутри секций

Если секция содержит горизонтальные слайды (slides), важно обновлять фокус при смене слайда:

new fullpage('#fullpage', {
    afterSlideLoad: function(section, origin, destination, direction){
        const focusable = destination.item.querySelector('[tabindex]');
        if(focusable) focusable.focus();
    }
});

Каждый слайд становится отдельной фокусной областью, предотвращая непреднамеренный переход фокуса на элементы соседних слайдов.

Итоговая структура фокус-менеджмента

  1. Инициализация fullPage.js с включением autoScrolling и navigation.
  2. Назначение tabindex для всех интерактивных элементов.
  3. Использование событий afterLoad, onLeave, afterSlideLoad для контроля фокуса.
  4. Трап-фокус для модальных элементов и интерактивных блоков.
  5. Программная установка фокуса при переходе между секциями и слайдами.
  6. Обновление доступности элементов клавиатурой при смене секций.

Эта схема обеспечивает плавную и доступную навигацию по странице, поддерживая все требования к фокус-менеджменту и совместимость с экранными читалками.

Оглавление