ARIA-атрибуты

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

Основные ARIA-атрибуты

Shepherd автоматически назначает некоторые ключевые атрибуты для шагов тура, но их можно настраивать вручную. Среди наиболее важных:

  • aria-label — краткое текстовое описание элемента, к которому привязан шаг. Используется экранными читалками для озвучивания назначения элемента.
  • aria-describedby — указывает на элемент, содержащий подробное описание шага, обычно текст подсказки или инструкции.
  • aria-hidden — временно скрывает элементы интерфейса от ассистивных технологий, если шаг фокусируется на другом элементе.
  • role — задает семантическую роль элемента. Shepherd по умолчанию использует dialog для модальных подсказок и tooltip для простых подсказок.

Настройка ARIA-атрибутов для шагов

Каждый шаг Shepherd можно конфигурировать с помощью объекта steps, где атрибуты ARIA задаются в параметре attachTo или в modalOverlayOptions.

Пример настройки:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    cancelIcon: {
      enabled: true
    },
    scrollTo: { beh * avior: 'smooth', block: 'center' },
    aria: true
  }
});

tour.addStep({
  id: 'step-1',
  text: 'Это первый шаг с ARIA-настройками',
  attachTo: {
    element: '#button1',
    on: 'bottom',
    // Настройка ARIA через attachTo
    aria: {
      label: 'Главная кнопка',
      describedby: 'step1-description'
    }
  },
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

В этом примере:

  • aria.label задает короткое описание элемента.
  • aria.describedby указывает на блок с полным текстом инструкции.

Использование modalOverlay для улучшения доступности

Shepherd.js поддерживает модальные оверлеи (modalOverlay), которые блокируют взаимодействие с остальными элементами страницы. При этом оверлей автоматически получает атрибут aria-hidden="true" для всех элементов страницы, не относящихся к шагу тура.

Пример:

const tour = new Shepherd.Tour({
  useModalOverlay: true,
  defaultStepOptions: {
    aria: true
  }
});

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

Фокусировка и управление клавиатурой

Shepherd автоматически управляет фокусом для шагов:

  • При открытии шага фокус устанавливается на первый интерактивный элемент в шаге.
  • Кнопки навигации (Next, Back, Cancel) доступны через клавиши Tab.
  • Для модальных шагов фокус зацикливается внутри шага до закрытия, предотвращая случайное взаимодействие с элементами за оверлеем.

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

tour.addStep({
  id: 'step-2',
  text: 'Шаг с кастомной фокусировкой',
  attachTo: '#input-field',
  when: {
    show: () => {
      document.querySelector('#input-field').focus();
    }
  }
});

Рекомендации по ARIA и Shepherd.js

  1. Использовать aria по умолчанию: Shepherd обеспечивает базовую доступность, но добавление собственных меток улучшает пользовательский опыт.
  2. Описывать действия кнопок: Каждая кнопка шага должна иметь понятное описание через aria-label.
  3. Проверять работу экранных читалок: После настройки ARIA важно тестировать туры с NVDA, VoiceOver или JAWS.
  4. Избегать перегрузки ARIA: Излишние атрибуты могут запутать ассистивные технологии, оставлять только необходимые.

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

Оглавление