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

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

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

Для обеспечения совместимости со скринридерами Intro.js использует ARIA-атрибуты, которые передают информацию о текущем шаге и навигации. Основные атрибуты:

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

Intro.js автоматически добавляет эти атрибуты к подсказкам (.introjs-tooltip) и затемняет фон. Это позволяет скринридеру сосредоточиться на активной подсказке, а не на всей странице.

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

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

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

Использование метода onafterchange позволяет разработчику дополнительно управлять фокусом, если необходимо сосредоточить внимание на конкретном элементе страницы:

introJs().onafterchange(function(targetElement) {
    targetElement.focus();
});

Чтение шагов скринридером

Intro.js гарантирует, что текст каждого шага озвучивается корректно:

  1. Заголовок подсказки добавляется в элемент с aria-labelledby.
  2. Основной текст шага помещается в элемент с aria-describedby.
  3. Скринридер автоматически анонсирует изменения, когда фокус перемещается на новый шаг.

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

Скринридеры и динамический контент

Если шаги интерактивные и содержат динамически загружаемый контент, важно учитывать задержку перед озвучиванием:

  • Intro.js позволяет использовать колбэки onchange и onafterchange, чтобы подождать загрузки элементов.
  • Для скринридеров критично, чтобы элемент был доступен в DOM до того, как на него будет перемещен фокус.

Пример:

introJs().onafterchange(function(targetElement) {
    if (!targetElement.offsetHeight) {
        setTimeout(() => targetElement.focus(), 100);
    }
});

Совместимость с популярными скринридерами

Intro.js тестировался с основными скринридерами:

  • NVDA и JAWS на Windows.
  • VoiceOver на macOS и iOS.
  • TalkBack на Android.

Особенности работы:

  • NVDA корректно озвучивает подсказки при использовании Firefox и Chrome.
  • VoiceOver корректно обрабатывает фокус и озвучивает заголовки и описания шагов.
  • TalkBack требует, чтобы подсказка оставалась в фокусе при скролле страницы, что обеспечивается встроенной функцией scrollToElement.

Настройка доступности

Intro.js позволяет настраивать ARIA-атрибуты вручную через опции:

introJs().setOptions({
    tooltipClass: 'custom-tooltip',
    showStepNumbers: false,
    exitOnOverlayClick: true
});

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

document.querySelector('.introjs-tooltip').setAttribute('aria-live', 'polite');

aria-live="polite" гарантирует, что скринридер озвучит обновление без прерывания текущей речи пользователя.

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

  • Использовать одинаковый порядок шагов на странице для предсказуемого озвучивания.
  • Минимизировать динамическую смену контента без обновления ARIA-атрибутов.
  • Следить, чтобы только активная подсказка была доступна для фокусировки.
  • Тестировать с различными скринридерами на разных платформах.

Поддержка скринридеров делает руководства Intro.js доступными для широкой аудитории, включая пользователей с нарушениями зрения, и повышает общую юзабилити интерфейса.

Оглавление