ARIA-атрибуты

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

Роль уведомлений

В iziToast уведомления автоматически получают ARIA-атрибуты, которые сообщают пользователю о типе и важности сообщения:

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

  • aria-live=“polite” / “assertive” Атрибут aria-live контролирует, как и когда экранные читалки озвучивают изменения содержимого. В iziToast по умолчанию используется:

    • "polite" — уведомление озвучивается после завершения текущего чтения.
    • "assertive" — уведомление прерывает текущее чтение и сразу озвучивается. Это важно для выбора между ненавязчивыми уведомлениями и критически важными сообщениями.

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

iziToast поддерживает управление фокусом через ARIA, что помогает пользователям клавиатуры и экранных читалок:

  • aria-describedby Используется для привязки уведомления к конкретному элементу страницы, который описывает его содержание. Например, при подтверждении действия можно указать, какой элемент связан с уведомлением.

  • aria-hidden=“true” / “false” Позволяет скрывать уведомления от вспомогательных технологий, если они не предназначены для озвучивания, например, когда используется фоновые сообщения или временные подсказки.

Конфигурация ARIA в iziToast

Все ARIA-атрибуты можно настраивать через объект опций при создании уведомления:

iziToast.show({
    title: 'Ошибка',
    message: 'Невозможно сохранить данные',
    color: 'red',
    position: 'topRight',
    theme: 'light',
    ariaRole: 'alert',        // role уведомления
    ariaLive: 'assertive',    // уровень озвучивания
    ariaHidden: false         // видимость для экранных читалок
});

Пояснения:

  • ariaRole определяет, как уведомление классифицируется (alert, status, log и др.).
  • ariaLive управляет приоритетом озвучивания.
  • ariaHidden позволяет скрывать уведомление, если оно не критично для пользователя.

Доступность динамического контента

iziToast генерирует уведомления динамически, добавляя их в DOM только при вызове iziToast.show(). Для корректной работы ARIA:

  1. Убедиться, что уведомление добавляется в видимую часть DOM. Экраные читалки не озвучивают элементы вне DOM.
  2. Не использовать display: none. Вместо этого использовать скрытие через aria-hidden или opacity: 0, чтобы уведомление оставалось доступным для вспомогательных технологий.
  3. Удаление уведомлений после тайм-аута не должно происходить мгновенно, чтобы экранные читалки успели озвучить сообщение. По умолчанию iziToast учитывает это через внутренние таймеры.

Особенности ARIA для разных типов уведомлений

  • success — обычно role="status" и aria-live="polite". Сообщения информативные, не прерывающие текущий поток речи.
  • error / warning — role="alert" и aria-live="assertive". Требуют немедленного внимания.
  • info / notice — можно использовать role="status" с aria-live="polite", так как они носят справочный характер.

Дополнительные рекомендации

  • Всегда предоставлять текстовое содержимое через title и message, чтобы экранные читалки могли корректно озвучивать уведомление.
  • Проверять уведомления с помощью доступных инструментов: NVDA, VoiceOver, ChromeVox.
  • Использовать единый подход для всех уведомлений, чтобы пользователи с ограничениями не сталкивались с непоследовательной озвучкой.

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

Оглавление