Тестирование доступности

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

Использование ARIA-атрибутов

Для улучшения доступности каждый шаг тура должен содержать корректные ARIA-атрибуты:

  • role="dialog" — используется для обозначения шага как модального окна.
  • aria-labelledby — указывает на заголовок шага, который будет озвучен экранными читалками.
  • aria-describedby — указывает на основной текст шага, обеспечивая полное описание для пользователей вспомогательных технологий.

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

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shepherd-theme-arrows',
    scrollTo: true,
    cancelIcon: {
      enabled: true
    },
    // Настройка ARIA
    ariaLive: 'polite'
  }
});

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

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

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

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

Пример:

tour.addStep({
  id: 'feature-step',
  text: 'Описание ключевой функции.',
  attachTo: { element: '.feature', on: 'top' },
  buttons: [
    {
      text: 'Закрыть',
      action: tour.complete
    }
  ],
  when: {
    show: () => {
      document.querySelector('.shepherd-step').focus();
    },
    hide: () => {
      document.querySelector('.feature').focus();
    }
  }
});

Использование методов focus() гарантирует корректное взаимодействие с экранными читалками и клавиатурной навигацией.

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

Shepherd.js поддерживает полный контроль с клавиатуры через настройки keyboardNavigation. Основные клавиши:

  • Tab / Shift + Tab — переход между кнопками шага.
  • Enter / Space — активация кнопки действия.
  • Escape — закрытие тура.

Для явного включения:

const tour = new Shepherd.Tour({
  keyboardNavigation: true
});

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

tour.on('cancel', () => {
  console.log('Тур отменен пользователем с клавиатуры');
});

Тестирование экранными читалками

Важным этапом является проверка туров с использованием популярных экранных читалок, таких как NVDA, JAWS или VoiceOver. Следует убедиться, что:

  • Каждый шаг корректно объявляет заголовок и содержание.
  • Фокус перемещается на интерактивные элементы шага.
  • Пользователь может закрыть или пропустить шаг через клавиатуру.
  • Обратная связь (например, сообщения о завершении шага) озвучивается правильно.

Интеграция с автоматическими инструментами проверки

Shepherd.js можно сочетать с библиотеками для автоматического тестирования доступности:

  • axe-core — проверка ARIA-атрибутов и цветовых контрастов.
  • jest-axe — интеграция с тестами Jest для CI/CD.
  • cypress-axe — проверка доступности шагов в браузерных тестах.

Пример использования axe-core:

import axe from 'axe-core';

tour.on('show', async () => {
  const results = await axe.run(document.querySelector('.shepherd-step'));
  if (results.violations.length) {
    console.warn('Нарушения доступности:', results.violations);
  }
});

Это позволяет выявлять проблемы до публикации и гарантировать, что туры соответствуют стандартам WCAG 2.1.

Советы по улучшению доступности

  1. Использовать лаконичные тексты шагов, минимизируя перегруженность информации.
  2. Обеспечить логичный порядок навигации по шагам.
  3. Предоставлять возможность пропуска тура через кнопку «Пропустить» или сочетание клавиш.
  4. Проверять контраст текста и кнопок на каждом шаге.
  5. Учитывать динамически создаваемые элементы, чтобы фокус корректно перемещался.

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

Оглавление