ARIA атрибуты

Driver.js использует ARIA (Accessible Rich Internet Applications) атрибуты для обеспечения доступности интерактивных шагов подсказок. Эти атрибуты помогают технологиям вспомогательного доступа, таким как экранные читалки, правильно интерпретировать элементы интерфейса, на которые указывает Driver.js, и предоставлять пользователю корректную информацию.

Атрибут aria-describedby

Каждый шаг Driver.js может ссылаться на описание через атрибут aria-describedby. Этот атрибут указывает на ID элемента, содержащего текст подсказки, который будет озвучен экранной читалкой. В Driver.js автоматически создаются скрытые контейнеры с уникальными ID, которые прикрепляются к целевым элементам.

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

const driver = new Driver();

driver.defineSteps([
  {
    element: '#submitButton',
    popover: {
      title: 'Отправка формы',
      description: 'Нажмите эту кнопку для отправки формы.',
      position: 'bottom'
    }
  }
]);

driver.start();

При старте подсказки для кнопки #submitButton будет автоматически установлен aria-describedby, указывающий на текст описания. Это гарантирует, что экранные читалки озвучат информацию о кнопке.

Атрибут aria-hidden

Driver.js использует aria-hidden="true" для всех элементов, которые временно перекрываются или затемняются в процессе тура. Это предотвращает доступ вспомогательных технологий к элементам, не имеющим отношения к текущему шагу подсказки.

Пример:

  • Текущий элемент подсказки: доступен для читалки.
  • Остальные элементы на странице: aria-hidden="true".

Таким образом достигается фокусировка на текущем шаге и минимизируется «шум» для пользователей с ограниченными возможностями.

Атрибут role

Для всплывающих подсказок Driver.js назначает роль dialog:

<div role="dialog" aria-modal="true">
  <!-- Контент подсказки -->
</div>

Использование роли dialog указывает экранным читалкам, что это интерактивный модальный элемент. Атрибут aria-modal="true" сигнализирует, что взаимодействие с остальной частью страницы временно ограничено.

Атрибут aria-live

Driver.js поддерживает динамическое обновление текста подсказок через aria-live. Атрибут aria-live="polite" обеспечивает постепенное озвучивание содержимого без прерывания текущего потока:

<div aria-live="polite" id="driver-description-1">
  Нажмите эту кнопку для отправки формы.
</div>

Использование aria-live критично для пошаговых туров, где содержимое подсказки обновляется динамически при переходе между шагами.

Настройка ARIA через опции Driver.js

Driver.js позволяет явно управлять ARIA атрибутами через параметры шага:

driver.defineSteps([
  {
    element: '#menu',
    popover: {
      title: 'Главное меню',
      description: 'Меню содержит ссылки на основные разделы сайта.',
      aria: {
        role: 'dialog',
        'aria-describedby': 'menu-description',
        'aria-hidden': false
      },
      position: 'right'
    }
  }
]);

Параметр aria позволяет:

  • Указать роль элемента.
  • Принудительно задать aria-describedby.
  • Контролировать видимость через aria-hidden.

Взаимодействие с фокусом

Driver.js автоматически управляет фокусом через ARIA. На текущем шаге:

  • Фокус устанавливается на целевой элемент.
  • Всплывающая подсказка озвучивается через aria-describedby.
  • Остальные элементы получают aria-hidden="true".

При смене шага ARIA атрибуты обновляются, чтобы экранная читалка правильно интерпретировала новый контекст.

Доступность кастомных элементов

Для кастомных компонентов, таких как слайдеры или сложные панели, Driver.js позволяет вручную контролировать ARIA:

  • Присвоение уникальных ID элементам описания.
  • Настройка ролей через role.
  • Обновление aria-live при изменении содержимого.

Это гарантирует корректное озвучивание при взаимодействии с нестандартными элементами интерфейса.

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

  • Всегда указывать aria-describedby для каждого шага.
  • Не отключать автоматическое управление aria-hidden.
  • Использовать роли dialog или tooltip для модальных подсказок.
  • Применять aria-live="polite" для динамических подсказок.
  • Проверять работу подсказок с экранными читалками, чтобы убедиться в корректной озвучке.

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

Оглавление