Поддержка скринридеров

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

ARIA-атрибуты и роли

Каждый шаг тура в Shepherd.js создаётся как отдельный DOM-элемент. Для поддержки скринридеров библиотека автоматически назначает важные ARIA-атрибуты:

  • role=“dialog” — элемент шага объявляется диалоговым окном, что позволяет скринридерам корректно оповещать о появлении нового контента.
  • aria-labelledby — ссылается на заголовок шага, чтобы озвучивать его текст при фокусировке.
  • aria-describedby — указывает на блок с основным описанием шага.
  • aria-hidden=“true/false” — контролирует видимость элементов для вспомогательных технологий.

Пример конфигурации шага с ARIA:

const tour = new Shepherd.Tour({
  defaults: {
    classes: 'shepherd-theme-arrows',
    scrollTo: true,
    showCancelLink: true
  }
});

tour.addStep({
  id: 'intro-step',
  text: 'Это первый шаг вашего руководства.',
  attachTo: { element: '.start-button', on: 'bottom' },
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ],
  title: 'Введение',
  when: {
    show: () => {
      const stepEl = document.querySelector('.shepherd-step');
      stepEl.setAttribute('role', 'dialog');
      stepEl.setAttribute('aria-labelledby', 'shepherd-step-title');
      stepEl.setAttribute('aria-describedby', 'shepherd-step-content');
    }
  }
});

Управление фокусом

Shepherd.js автоматически переносит фокус на активный шаг при его отображении, что критично для скринридеров. Это реализуется через метод focus(), применяемый к основному контейнеру шага:

  • Фокусировка на шаге предотвращает потерю контекста при навигации.
  • Скринридеры озвучивают содержимое элемента, получившего фокус.

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

tour.on('show', (event) => {
  const stepElement = event.step.el;
  stepElement.focus();
});

Поддержка клавиатурной навигации

Ключевой аспект доступности — возможность перемещаться между шагами без мыши. Shepherd.js поддерживает:

  • Переход к следующему шагу клавишей Enter или Space.
  • Возврат к предыдущему шагу с помощью Shift+Tab или специальных кнопок.
  • Закрытие тура клавишей Esc.

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

Использование семантических элементов

Для оптимальной работы скринридеров рекомендуется, чтобы шаги использовали семантические HTML-теги:

  • Заголовки (<h1>–<h6>) для title.
  • Параграфы (<p>) или списки (<ul>/<li>) для описаний text.
  • Кнопки (<button>) для навигации.

Пример:

tour.addStep({
  id: 'feature-step',
  title: '<h2 id="shepherd-step-title">Особенности</h2>',
  text: '<p id="shepherd-step-content">Эта функция позволяет выполнять важные действия.</p>',
  buttons: [
    {
      text: '<button>Далее</button>',
      action: tour.next
    }
  ]
});

Интеграция с Live Regions

Для динамического обновления контента шагов можно использовать ARIA live regions. Shepherd.js позволяет назначать контейнеру шагов aria-live="polite" или aria-live="assertive", что гарантирует, что скринридер озвучит новые шаги автоматически.

const stepElement = document.querySelector('.shepherd-step');
stepElement.setAttribute('aria-live', 'polite');
  • polite — уведомление без прерывания текущего чтения.
  • assertive — немедленное озвучивание контента.

Настройка и проверка доступности

Shepherd.js совместим с инструментами проверки доступности, такими как axe и Lighthouse, позволяя убедиться, что:

  • Все шаги имеют корректные ARIA-атрибуты.
  • Фокус корректно перемещается на каждый шаг.
  • Кнопки навигации доступны для клавиатуры.
  • Контент шагов логично структурирован и озвучивается скринридером.

Важные рекомендации

  • Каждый шаг должен иметь уникальный id и соответствующие aria-labelledby/aria-describedby.
  • Не скрывать контент шагов через display: none, используйте aria-hidden.
  • Проверять доступность с реальными скринридерами, такими как NVDA, VoiceOver, JAWS.

Эти подходы делают Shepherd.js туры полностью доступными, улучшая взаимодействие для пользователей с нарушениями зрения и обеспечивая соответствие стандартам WCAG.

Оглавление