Навигация с клавиатуры

Библиотека Intro.js предоставляет гибкие возможности управления пошаговыми инструкциями с использованием клавиатуры. Навигация с клавиатуры является ключевой функцией для повышения доступности интерфейса и удобства взаимодействия с пользователем без мыши. Основные клавиши, используемые в Intro.js, включают стрелки для перехода между шагами, Enter для подтверждения действия и Escape для выхода из подсказки.

Основные методы управления клавиатурой

По умолчанию Intro.js автоматически отслеживает нажатия клавиш для перехода по шагам. Включение или отключение этой функции осуществляется через метод:

intro.setOptions({
  keyboardNavigation: true // или false для отключения
});
  • true — активирует возможность навигации с клавиатуры.
  • false — деактивирует клавиатурное управление, оставляя только кнопки интерфейса.

Обработка отдельных клавиш

Intro.js использует следующие стандартные клавиши:

  • ArrowRight / ArrowDown — переход к следующему шагу.
  • ArrowLeft / ArrowUp — возврат к предыдущему шагу.
  • Enter — выполнение действия на текущем шаге (аналог кнопки «Next»).
  • Escape — завершение текущего тура и закрытие подсказки.

При необходимости можно добавить кастомную обработку клавиш через событие onbeforechange или глобальный слушатель событий:

document.addEventListener('keydown', function(event) {
  if (event.key === ' ') { // Пример: пробел для перехода вперед
    intro.nextStep();
  }
});

Ограничение навигации по шагам

Для повышения контроля над последовательностью шагов можно использовать события:

  • onbeforechange(targetElement) — вызывается перед отображением нового шага. Позволяет отменить переход, например, при определённых условиях.
  • onchange(targetElement) — вызывается сразу после смены шага, что позволяет управлять состояниями клавиш или фокусом элементов.

Пример ограничения перехода по клавиатуре:

intro.onbeforechange(function(targetElement) {
  if (targetElement.id === 'step3' && !userHasCompletedStep2) {
    return false; // Блокировка перехода на шаг 3
  }
});

Интеграция с фокусом элементов

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

intro.onafterchange(function(targetElement) {
  targetElement.focus(); // Явное установление фокуса
});

Это обеспечивает возможность использования Enter и других клавиш для выполнения действий на текущем элементе без мыши.

Кастомизация клавиатурных комбинаций

Библиотека поддерживает переопределение стандартных клавиш через расширение объекта options.keyboardNavigationKeys:

intro.setOptions({
  keyboardNavigationKeys: {
    next: ['ArrowRight', 'Space'], // Добавляем пробел для перехода вперед
    prev: ['ArrowLeft', 'Backspace'], // Добавляем Backspace для возврата
    exit: ['Escape', 'q'] // Дополнительная клавиша выхода
  }
});

Это позволяет создавать уникальные сценарии навигации в зависимости от специфики приложения.

Работа с динамическим контентом

Если элементы добавляются или изменяются динамически после запуска Intro.js, важно повторно инициализировать или обновить шаги, чтобы клавиатурная навигация оставалась корректной:

intro.refresh(); // Обновление текущих шагов для динамических элементов

Совместимость с доступностью

Навигация с клавиатуры тесно связана с принципами доступности (ARIA). Intro.js корректно обновляет атрибуты aria-hidden и tabindex, что позволяет пользователям с ассистивными технологиями перемещаться по шагам без потери контекста. Рекомендуется дополнительно проверять, что каждый целевой элемент доступен для фокусировки.

Резюме по функционалу клавиатуры

  • Включение/отключение навигации через keyboardNavigation.
  • Стандартные клавиши: стрелки, Enter, Escape.
  • Пользовательские комбинации через keyboardNavigationKeys.
  • Управление фокусом для корректного взаимодействия.
  • Ограничение переходов с помощью событий onbeforechange.
  • Поддержка динамически изменяемого контента через refresh().
  • Полная совместимость с ARIA и принципами доступности.

Такой подход обеспечивает полноценное управление турами Intro.js без мыши, повышая удобство, безопасность и доступность интерфейсов.

Оглавление