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

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

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

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

const driver = new Driver({
    keyboardControl: true,
});
driver.defineSteps([
    {
        element: '#submit-button',
        popover: {
            title: 'Кнопка отправки',
            description: 'Нажмите Enter, чтобы отправить форму.'
        }
    }
]);
driver.start();

Ключевые моменты:

keyboardControl: true — позволяет пользователю управлять навигацией между шагами с помощью клавиатуры (стрелки, Enter, Esc).
Фокус автоматически переносится на элемент шага, что упрощает работу со скринридерами.
Если элемент недоступен в DOM, библиотека безопасно пропускает шаг, предотвращая зависания.

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

Driver.js использует ARIA-атрибуты для обеспечения доступности контента:

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

Пример настройки:

const driver = new Driver({
    stageBackground: '#ffffff',
    opacity: 0.75,
    allowClose: false,
    keyboardControl: true
});

Объяснение настроек:

stageBackground и opacity визуально выделяют элемент, но при этом не мешают восприятию с помощью скринридера.
allowClose: false предотвращает случайное закрытие тура, важное для пользователей, которые используют клавиатуру или вспомогательные технологии.

Настройка таймингов и анимаций

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

const driver = new Driver({
    animate: false,
    doneBtnText: 'Готово',
    nextBtnText: 'Далее',
    prevBtnText: 'Назад'
});

Особенности:

animate: false отключает анимации, уменьшая визуальную нагрузку.
Возможность задавать тексты кнопок (doneBtnText, nextBtnText, prevBtnText) помогает создавать локализованные и понятные инструкции.
Поддерживается настройка длительности отображения шагов через пользовательские таймеры, что позволяет адаптировать тур под скорость восприятия информации пользователем.

Учет доступности скрытых элементов

Driver.js позволяет работать с элементами, которые могут быть скрыты стилями или динамически созданы в DOM:

driver.defineSteps([
    {
        element: '#hidden-element',
        popover: {
            title: 'Скрытый элемент',
            description: 'Этот элемент появляется только после выполнения действия.'
        },
        onNext: function () {
            document.querySelector('#hidden-element').style.display = 'block';
        }
    }
]);

Принципы:

Элементы, скрытые с помощью display: none или visibility: hidden, могут быть временно показаны для корректной работы тура.
Использование событий onNext и onPrevious позволяет динамически управлять состоянием элементов, сохраняя доступность.

Пользовательские обработчики для улучшения доступности

Driver.js предоставляет события жизненного цикла шагов (onNext, onPrevious, onStart, onReset), которые можно использовать для дополнительной настройки доступности:

driver.on('next', (step) => {
    const el = step.element;
    if (el) el.setAttribute('aria-expanded', 'true');
});

Применение:

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