ARIA-атрибуты

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

Основные ARIA-атрибуты в Toastify

role

Атрибут role определяет семантическую роль элемента. В Toastify для уведомлений чаще всего используется:

role: 'status'

Объяснение:

  • status — элемент уведомляет пользователя о новой информации, не прерывая текущий контекст. Скринридеры автоматически озвучивают его при появлении.
  • Альтернатива: alert. Используется, если уведомление требует немедленного внимания.

aria-live

Атрибут aria-live управляет тем, как скринридер сообщает пользователю о новых сообщениях:

ariaLive: 'polite'

Варианты значений:

  • off — обновления игнорируются.
  • polite — информация озвучивается, когда текущие действия завершены.
  • assertive — информация озвучивается немедленно, прерывая текущую речь скринридера.

Для Toastify polite подходит для большинства уведомлений, а assertive — для критических ошибок.

aria-atomic

Этот атрибут определяет, будет ли скринридер озвучивать весь элемент целиком при изменении или только обновившуюся часть:

ariaAtomic: true

Примечание:

  • true — весь текст уведомления произносится целиком.
  • false — произносится только изменённая часть текста.

Настройка ARIA в Toastify

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

Toastify({
    text: "Данные успешно сохранены",
    duration: 3000,
    gravity: "top",
    position: "right",
    close: true,
    ariaLive: 'polite',
    role: 'status',
    ariaAtomic: true
}).showToast();

Ключевые моменты настройки:

  • ariaLive и role отвечают за семантику и озвучивание уведомления.
  • ariaAtomic обеспечивает корректное озвучивание даже при динамическом обновлении текста.
  • Опции не влияют на визуальное отображение, но критичны для доступности.

Динамические уведомления и доступность

В ситуациях, когда текст уведомления изменяется без перезагрузки страницы:

const toast = Toastify({
    text: "Загрузка...",
    duration: -1,
    ariaLive: 'polite',
    role: 'status',
}).showToast();

// Через несколько секунд обновляем текст
setTimeout(() => {
    toast.setText("Загрузка завершена");
}, 2000);

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

  • При использовании ariaAtomic: true скринридер озвучит новое сообщение полностью.
  • ariaLive: 'polite' позволяет избежать прерывания текущих действий пользователя.

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

  • VoiceOver (iOS, macOS) корректно обрабатывает role="status" и aria-live.
  • NVDA и JAWS (Windows) реагируют на aria-live="polite" и assertive, но могут по-разному интерпретировать динамические обновления текста.
  • Рекомендуется тестировать Toastify на реальных устройствах и с включенными вспомогательными технологиями для проверки правильного озвучивания.

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

  • Использовать role="status" для обычных уведомлений и role="alert" для критических сообщений.
  • ariaLive: 'polite' подходит для сообщений без срочной необходимости.
  • Всегда устанавливать ariaAtomic: true, если текст уведомления может меняться динамически.
  • Проверять отображение и озвучивание на нескольких платформах, чтобы избежать непредвиденных проблем с доступностью.

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

Оглавление