Accessibility-first подход

Библиотека Toastify изначально спроектирована с учётом доступности (accessibility-first). Это означает, что все уведомления (toasts) создаются так, чтобы их могли воспринимать пользователи с ограниченными возможностями, включая слабовидящих и пользователей с ограниченными устройствами ввода. В основе лежат стандарты ARIA (Accessible Rich Internet Applications) и корректное взаимодействие с экранными читалками.

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

Каждое уведомление, создаваемое через Toastify, автоматически получает атрибут role="alert" или role="status" в зависимости от настроек.

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

Также можно добавлять дополнительные ARIA-атрибуты вручную через объект конфигурации:

Toastify({
  text: "Данные успешно сохранены",
  ariaLive: "polite", // "polite" или "assertive"
  duration: 3000
}).showToast();
  • ariaLive: "polite" — уведомление будет озвучено экранными читалками после завершения текущей задачи пользователя.
  • ariaLive: "assertive" — сообщение прерывает текущую озвучку и озвучивается немедленно.

Навигация с клавиатуры

Все toast-уведомления в Toastify можно полностью контролировать с клавиатуры. По умолчанию:

  • Закрытие уведомления: клавиша Escape.
  • Фокусировка на уведомлении: при наведении через клавиши Tab уведомление получает видимый outline, соответствующий стандартам WCAG.

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

Toastify({
  text: "Сообщение с клавиатурным управлением",
  onClick: function() {
    console.log("Toast нажат клавишей Enter или пробелом");
  }
}).showToast();

Контрастность и читаемость

Toastify поддерживает высокий уровень контрастности текста относительно фона уведомления. Это критично для пользователей с нарушениями зрения.

  • Рекомендуется использовать не менее 4.5:1 контраста текста к фону для обычного текста и 7:1 для заголовков.
  • В библиотеке предусмотрены встроенные стили с достаточной контрастностью, а для кастомных цветов можно задать свои значения через CSS:
.toastify {
  background-color: #0055aa;
  color: #ffffff;
  font-size: 16px;
}

Поддержка screen reader-friendly текста

Все уведомления могут содержать скрытые описания, которые видны только для экранных читалок. Это делается с помощью CSS-класса sr-only (screen reader only) или через встроенные ARIA-атрибуты:

Toastify({
  text: "Данные сохранены",
  ariaLabel: "Уведомление: данные успешно сохранены"
}).showToast();

Такой подход обеспечивает полное понимание контекста уведомления пользователями с визуальными ограничениями.

Управление временем отображения и доступностью

Длительность отображения toast-уведомления должна быть достаточной, чтобы пользователь успел его воспринять, особенно если он использует экранное устройство. Toastify позволяет задавать индивидуальную длительность:

Toastify({
  text: "Файл загружен",
  duration: 5000, // 5 секунд
  close: true
}).showToast();

Если уведомление содержит важную информацию, можно использовать флаг close: true, чтобы пользователь сам закрывал toast, обеспечивая полный контроль.

Гибкая конфигурация для accessibility-first

Основные параметры, влияющие на доступность:

  • text — текст уведомления.
  • ariaLive — режим озвучки экранными читалками (polite/assertive).
  • close — возможность ручного закрытия.
  • duration — длительность показа уведомления.
  • onClick — обработка действий с клавиатуры или мыши.
  • ariaLabel — описание для экранных читалок.

Все эти параметры можно комбинировать для создания доступных, гибких и информативных уведомлений, полностью соответствующих стандартам WCAG 2.1.

Интеграция с существующими фреймворками

Toastify легко интегрируется с React, Vue и другими фреймворками, при этом сохраняется поддержка accessibility-first:

import Toastify from 'toastify-js';
import 'toastify-js/src/toastify.css';

Toastify({
  text: "Данные обновлены",
  ariaLive: "polite",
  duration: 4000,
  close: true
}).showToast();

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

Оглавление