Поддержка ARIA-атрибутов

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

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

Каждое уведомление Noty автоматически получает атрибут role, который определяет его поведение для вспомогательных технологий:

  • alert — уведомление с высокой приоритетностью, которое должно быть объявлено немедленно.
  • status — уведомление с низкой приоритетностью, для фоновых сообщений.

Выбор роли зависит от типа уведомления и уровня критичности информации. Для стандартных информационных сообщений часто используется status, тогда как ошибки или предупреждения лучше помечать как alert.

new Noty({
  text: 'Ошибка загрузки данных',
  type: 'error',
  layout: 'topRight',
  timeout: 5000,
  progressBar: true,
  // роль для экранных читалок
  modal: false,
  theme: 'mint',
  callbacks: {
    onShow: function() {
      this.bar.setAttribute('role', 'alert');
    }
  }
}).show();

Атрибут aria-live

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

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

В Noty aria-live можно задавать через конфигурацию aria:

new Noty({
  text: 'Сообщение отправлено',
  type: 'success',
  layout: 'topRight',
  timeout: 3000,
  aria: {
    role: 'status',
    live: 'polite'
  }
}).show();

Атрибуты aria-atomic и aria-relevant

  • aria-atomic — указывает, что всё содержимое уведомления должно быть объявлено целиком при изменении. Используется для предупреждений с большим количеством текста.
  • aria-relevant — контролирует, какие изменения текста будут объявляться: additions, removals, text.
new Noty({
  text: 'Обновление доступно',
  type: 'information',
  aria: {
    atomic: true,
    relevant: 'additions text'
  }
}).show();

Доступность кнопок и интерактивных элементов

Если уведомление содержит кнопки (например, закрытие или подтверждение действия), каждая кнопка должна быть доступна через клавиатуру и иметь корректные ARIA-метки:

new Noty({
  text: 'Удалить файл?',
  type: 'warning',
  buttons: [
    Noty.button('Да', 'btn btn-success', function(n) {
      console.log('Файл удалён');
      n.close();
    }, { 'aria-label': 'Подтвердить удаление' }),
    Noty.button('Нет', 'btn btn-error', function(n) {
      n.close();
    }, { 'aria-label': 'Отменить удаление' })
  ],
  aria: {
    role: 'alertdialog'
  }
}).show();

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

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

Для максимальной доступности Noty поддерживает управление фокусом на интерактивные элементы внутри уведомлений. После отображения уведомления можно программно установить фокус на кнопку подтверждения или закрытия:

callbacks: {
  onShow: function() {
    const button = this.bar.querySelector('button');
    if (button) button.focus();
  }
}

Взаимодействие с другими элементами страницы

Noty позволяет уведомлениям не мешать основному контенту, сохраняя доступность элементов страницы. Рекомендуется:

  • Устанавливать aria-live на polite для информационных сообщений.
  • Использовать role: alert только для критических уведомлений.
  • Всегда обеспечивать клавиатурную навигацию для интерактивных элементов внутри уведомлений.

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

Оглавление