Роли для скринридеров

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

Основные роли ARIA

Noty поддерживает назначение различных ARIA-ролей, которые определяют, как скринридеры воспринимают уведомление. Среди основных ролей:

  • alert – уведомление, которое требует немедленного озвучивания. Скринридеры озвучивают его автоматически, даже если пользователь находится в другом контексте страницы. Используется для критических сообщений.
  • status – уведомление, которое сообщает о текущем состоянии приложения, но не требует немедленного внимания. Скринридеры могут проигрывать его в зависимости от текущей активности пользователя.
  • log – роль для записей, которые представляют поток событий или действий, обычно менее приоритетные. Скринридеры могут пропускать их при необходимости.
  • region – область с динамическим содержимым, важная для структурирования страницы и облегчения навигации для пользователей вспомогательных технологий.

Настройка роли уведомления

В Noty роль уведомления задается через параметр ariaRole. Пример инициализации уведомления с ролью alert:

new Noty({
    text: 'Ошибка при сохранении данных',
    type: 'error',
    timeout: 5000,
    layout: 'topRight',
    progressBar: true,
    ariaRole: 'alert' // ключевой атрибут для скринридеров
}).show();

Для роли status используется аналогичная конфигурация:

new Noty({
    text: 'Данные успешно обновлены',
    type: 'success',
    timeout: 3000,
    layout: 'bottomLeft',
    ariaRole: 'status'
}).show();

Взаимодействие с ARIA-live

Помимо роли, Noty автоматически добавляет атрибут aria-live, соответствующий выбранной роли:

  • alert → aria-live="assertive" Уведомления озвучиваются немедленно.
  • status → aria-live="polite" Уведомления озвучиваются с приоритетом по мере возможности, не прерывая текущий контент.
  • log и region → обычно aria-live="off" или настраивается вручную.

Можно явно переопределить aria-live при необходимости:

new Noty({
    text: 'Новое сообщение в чате',
    ariaRole: 'status',
    ariaLive: 'polite' // ручная настройка поведения скринридера
}).show();

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

Noty добавляет уведомления в DOM динамически, что важно учитывать для скринридеров. Для корректной работы необходимо:

  1. Обеспечить уникальные контейнеры уведомлений для каждой роли.
  2. Использовать aria-atomic="true" для уведомлений, которые должны озвучиваться полностью, даже если содержимое изменилось частично.
  3. Учитывать порядок появления уведомлений — скринридеры читают их по мере добавления в DOM, поэтому критические уведомления с alert должны появляться выше остальных.

Пример расширенной настройки:

new Noty({
    text: 'Новая ошибка подключения',
    type: 'error',
    layout: 'topCenter',
    progressBar: false,
    ariaRole: 'alert',
    ariaLive: 'assertive',
    ariaAtomic: true
}).show();

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

  • Для ошибок и критических событий всегда использовать ariaRole: 'alert'.
  • Для информационных уведомлений, не требующих немедленного внимания, использовать ariaRole: 'status'.
  • Для уведомлений с большим потоком сообщений, где приоритет не критичен, можно использовать log.
  • Проверять работу уведомлений с различными скринридерами (NVDA, VoiceOver, JAWS) и в разных браузерах, так как интерпретация ARIA может различаться.
  • Обеспечивать достаточную контрастность текста и фона уведомлений, так как визуальная доступность важна для пользователей с низким зрением.

Заключение по ролям

Правильная настройка ролей уведомлений в Noty позволяет сделать интерфейс доступным и дружелюбным к пользователям, использующим вспомогательные технологии. Использование ariaRole, aria-live и aria-atomic обеспечивает корректную озвучку уведомлений и соблюдение стандартов доступности.

Оглавление