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

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

ARIA-атрибуты и роль компонентов

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

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

Пример создания шага с использованием ARIA:

const driver = new Driver();

driver.defineSteps([
  {
    element: '#submit-button',
    popover: {
      title: 'Кнопка отправки',
      description: 'Нажмите эту кнопку, чтобы отправить форму',
      position: 'bottom'
    },
    onNext: () => console.log('Следующий шаг')
  }
]);

driver.start();

При правильной конфигурации Driver.js автоматически добавляет popover с нужными атрибутами и управляет фокусом.

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

Фокусировка на активном элементе является ключевым моментом для скринридеров:

  • При переходе к новому шагу фокус должен перемещаться на элемент или на всплывающее окно, чтобы скринридер мог озвучить содержимое.
  • Driver.js предоставляет метод setFocus внутри конфигурации шага, позволяющий вручную управлять фокусом:
driver.defineSteps([
  {
    element: '#menu-item',
    popover: { title: 'Меню', description: 'Выберите пункт меню' },
    onShow: (element) => element.focus()
  }
]);
  • Всплывающие подсказки также могут быть неактивными для клавиатурного фокуса, если необходимо оставить основной фокус на элементе интерфейса.

Озвучивание контента

Для корректного озвучивания текста:

  1. Избегать использования нестандартных элементов без ARIA-атрибутов, так как скринридеры могут их игнорировать.
  2. Использовать semantic HTML для заголовков (<h1>-<h6>) и описаний (<p>), которые будут правильно обрабатываться.
  3. Динамически обновлять aria-live для интерактивного контента:
const liveRegion = document.createElement('div');
liveRegion.setAttribute('aria-live', 'polite');
liveRegion.setAttribute('aria-atomic', 'true');
document.body.appendChild(liveRegion);

driver.on('next', (step) => {
  liveRegion.textContent = step.popover.description;
});

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

Driver.js поддерживает клавиатурное управление:

  • Tab/Shift+Tab — перемещение по интерактивным элементам.
  • Enter/Space — переход к следующему шагу.
  • Escape — закрытие текущего шага.

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

Тестирование с реальными скринридерами

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

  • NVDA (Windows) — проверка озвучивания элементов и последовательности шагов.
  • VoiceOver (macOS/iOS) — проверка фокусировки и динамического обновления контента.
  • TalkBack (Android) — проверка взаимодействия с сенсорными интерфейсами и правильной озвучки всплывающих подсказок.

Рекомендации по структуре туров

  • Минимизировать количество шагов на экране одновременно, чтобы не перегружать пользователя информацией.
  • Обеспечивать логический порядок шагов, совпадающий с визуальным порядком элементов на странице.
  • Всегда включать заголовок и описание шага, чтобы скринридер мог озвучивать контекст и действия.

Поддержка ARIA-атрибутов в кастомных поповерах

Если используются кастомные стили или HTML-шаблоны для popover, необходимо:

  1. Добавлять role="dialog" вручную.
  2. Устанавливать aria-labelledby и aria-describedby на соответствующие элементы внутри шаблона.
  3. Следить за тем, чтобы кнопки навигации были доступны с клавиатуры (tabindex="0").

События для улучшения доступности

Driver.js предоставляет события, которые позволяют интегрировать дополнительные функции для пользователей скринридеров:

  • onShow — срабатывает при отображении шага, удобен для установки фокуса.
  • onNext / onPrevious — можно обновлять aria-live или другие вспомогательные элементы.
  • onReset — возвращает фокус к исходному состоянию страницы.

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

Оглавление