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

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

Атрибуты ARIA для уведомлений

Для обеспечения доступности iziToast использует стандартные атрибуты ARIA. Основные из них:

  • role="alert" — уведомление автоматически сообщается скринридеру как важное сообщение. Элемент с этим атрибутом будет прочитан немедленно, без необходимости фокусировки.
  • aria-live="assertive" — аналогично role="alert", сообщает, что контент должен быть прочитан как можно быстрее.
  • aria-atomic="true" — гарантирует, что скринридер озвучит полностью все содержимое уведомления, даже если оно изменяется динамически.
  • aria-label — позволяет задать текстовое описание уведомления, если стандартного текста недостаточно для контекста.

iziToast автоматически назначает role="alert" для стандартных уведомлений, что обеспечивает базовую совместимость со всеми современными скринридерами.

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

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

  • Метод iziToast.show() создаёт уведомление в DOM, но оно не захватывает фокус. Для уведомлений, требующих взаимодействия (например, с кнопкой закрытия или подтверждения), рекомендуется программно перемещать фокус на активные элементы внутри уведомления.
  • Кнопки в iziToast можно реализовать с помощью параметра buttons, который создаёт <button> внутри уведомления. Каждая кнопка доступна для навигации с помощью клавиши Tab и может быть активирована через Enter или Space.
  • Для автоматического закрытия уведомления можно использовать опцию timeout. Однако уведомления с обязательным взаимодействием должны иметь timeout: false, чтобы не исчезать до того, как пользователь сможет их озвучить и прочитать.

Примеры доступных уведомлений

iziToast.show({
    title: 'Успешно',
    message: 'Данные сохранены',
    position: 'topRight',
    timeout: 5000,
    buttons: [
        ['<button>Закрыть</button>', function (instance, toast) {
            instance.hide({ transitionOut: 'fadeOut' }, toast);
        }]
    ],
    onOpening: function () {
        const toastElement = document.querySelector('.iziToast');
        toastElement.setAttribute('role', 'alert');
        toastElement.setAttribute('aria-live', 'assertive');
        toastElement.setAttribute('aria-atomic', 'true');
    }
});

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

Особенности озвучивания динамического контента

Когда уведомление обновляет своё содержимое динамически (например, через update или повторное использование iziToast.show() для того же ID), важно, чтобы скринридер корректно считывал изменения. Для этого:

  • Используется aria-live="polite" для уведомлений с второстепенной информацией, которая не требует немедленного озвучивания.
  • aria-atomic="true" гарантирует, что при изменении текста будет произнесено полное сообщение.
  • При необходимости можно программно обновлять aria-label, чтобы обеспечить правильное озвучивание нового текста.

Совместимость с различными скринридерами

iziToast корректно работает с популярными скринридерами:

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

Для всех этих систем уведомления с role="alert" и aria-live="assertive" автоматически озвучиваются, а интерактивные элементы остаются доступными через клавиатурную навигацию.

Рекомендации по улучшению доступности

  • Использовать семантические роли (alert, status) в зависимости от важности сообщения.
  • Сохранять уведомления на экране достаточно долго для их озвучивания.
  • Обеспечивать альтернативный способ закрытия уведомлений через клавиатуру.
  • Проверять поведение уведомлений с реальными скринридерами, так как различия в интерпретации ARIA атрибутов могут влиять на озвучивание.

Заключение по доступности

Правильная настройка iziToast с ARIA-атрибутами, поддержка клавиатурной навигации и управление динамическим контентом позволяют создавать полностью доступные уведомления. Это обеспечивает корректное взаимодействие с пользователями, использующими скринридеры, и соответствует современным стандартам веб-доступности.

Оглавление