ARIA-атрибуты

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

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

Intro.js автоматически добавляет некоторые атрибуты к элементам, которые участвуют в шаге. Основные из них:

  • aria-hidden=“true” Скрывает от экранных читалок все элементы страницы, кроме текущего шага. Это предотвращает отвлечение пользователя и фокусирует внимание на активном контенте.

  • aria-describedby Ссылается на контейнер, содержащий текст шага. Экранная читалка озвучивает описание шага, обеспечивая доступность информации.

  • role=“dialog” Используется для обертки шага, сигнализируя ассистивным технологиям, что это модальный диалог. Элемент с role=“dialog” воспринимается как отдельное окно с фокусом на текущем контенте.

  • aria-live=“polite” Устанавливается для текста шага, чтобы обновления озвучивались экранными читалками без резкого прерывания текущего потока речи.

Настройка ARIA в конфигурации Intro.js

Intro.js предоставляет возможность тонкой настройки доступности через параметры:

introJs().setOptions({
  steps: [
    {
      element: '#button1',
      intro: 'Нажмите эту кнопку для начала процесса',
      tooltipClass: 'customTooltip'
    },
    {
      element: '#formField',
      intro: 'Введите данные в это поле',
      position: 'right'
    }
  ],
  hidePrev: true,
  hideNext: false,
  disableInteraction: false,
  showStepNumbers: false
});
  • disableInteraction — при true элементы интерфейса недоступны для кликов, что предотвращает случайные действия и сохраняет фокус на текущем шаге. При этом все элементы остаются доступными для экранных читалок.
  • tooltipClass — позволяет добавить кастомные стили и, при необходимости, управлять ARIA-атрибутами вручную через CSS или JavaScript.

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

Правильная работа ARIA невозможна без корректного управления фокусом:

  • На каждом шаге Intro.js автоматически переносит фокус на элемент шага или на контейнер подсказки.
  • Для элементов формы важно сохранять возможность ввода с клавиатуры, если disableInteraction установлен в false.
  • При кастомизации подсказок можно использовать tabindex="0" для контейнера шага, чтобы обеспечить корректный переход клавишей Tab.

Пользовательские ARIA-атрибуты

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

document.querySelector('#step1').setAttribute('aria-label', 'Начало процесса');
document.querySelector('#step2').setAttribute('aria-describedby', 'step2Description');
  • aria-label — добавляет краткое описание элемента, используемое экранными читалками.
  • aria-describedby — позволяет ссылаться на отдельный элемент с расширенным описанием шага.

При этом важно следить, чтобы id, указанный в aria-describedby, был уникальным и содержал читаемый текст.

Скрытие фонового контента

Intro.js поддерживает возможность затемнения фона с сохранением доступности:

introJs().setOptions({
  highlightClass: 'introjs-highlight',
  overlayOpacity: 0.7
});

При этом библиотека автоматически выставляет aria-hidden=“true” на все элементы, которые не являются активным шагом. Важно проверять, что интерактивные элементы (кнопки, поля ввода) вне шага недоступны для клика, но скрыты от экранных читалок.

Динамическая смена шагов и ARIA

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

introJs().onbeforechange(function(targetElement) {
  targetElement.setAttribute('aria-live', 'polite');
});
  • onbeforechange позволяет установить атрибуты до отображения шага.
  • Обеспечивает корректное оповещение о новых шагах для пользователей с ограничениями зрения.

Практические рекомендации

  1. Использовать встроенные ARIA-атрибуты Intro.js для модальных шагов.
  2. Добавлять дополнительные описания через aria-describedby для сложного контента.
  3. Сохранять фокус на интерактивных элементах и подсказках с помощью tabindex.
  4. Проверять доступность с помощью экранных читалок, например NVDA или VoiceOver.
  5. Минимизировать текст в ARIA-атрибутах, но сохранять информативность и краткость.

Правильная интеграция ARIA делает интерактивные инструкции Intro.js доступными для всех пользователей, обеспечивая удобство навигации и полного понимания интерфейса.

Оглавление