Объявления для скринридеров

Unpoly предоставляет встроенные механизмы для поддержки доступности, включая возможность создания объявлений для скринридеров. Эти объявления используются для информирования пользователей с нарушениями зрения о динамических изменениях контента без необходимости перезагрузки страницы.

Роль ARIA-live

Ключевым механизмом является атрибут aria-live. Он сообщает скринридерам, что содержимое определённого элемента может изменяться динамически, и эти изменения необходимо озвучивать. В Unpoly для управления объявлениями используются следующие свойства:

  • aria-live="polite" — изменения озвучиваются скринридером, но не прерывают текущую речь пользователя. Подходит для ненавязчивых уведомлений, таких как подтверждения действий.
  • aria-live="assertive" — озвучивание происходит немедленно, прерывая текущую речь. Используется для критичных уведомлений или ошибок.

Методы уведомления через API

Unpoly предоставляет специальный API для программного создания объявлений:

up.notify("Элемент успешно обновлён");

Этот метод создает временный элемент с aria-live="polite" внутри контейнера для уведомлений. Ключевые моменты работы:

  • Сообщение автоматически скрывается после завершения озвучивания и не оставляет визуальных артефактов на странице.
  • Можно задать уровень приоритета:
up.notify("Ошибка при сохранении данных", { priority: 'assertive' });
  • priority: 'polite' — стандартное поведение, уведомление произносится аккуратно.
  • priority: 'assertive' — уведомление прерывает текущую речь скринридера.

Настройка контейнера для объявлений

По умолчанию Unpoly создает скрытый элемент <div> с aria-live="polite" внутри <body>. Для более сложных интерфейсов возможно указать собственный контейнер:

up.notify("Данные загружены", {
  container: "#custom-announcements"
});

Требования к контейнеру:

  • Элемент должен существовать в DOM на момент вызова уведомления.
  • Атрибут aria-live можно задавать вручную, если требуется особое поведение.

Управление временными уведомлениями

Временные уведомления помогают избежать накопления большого числа элементов с озвучиванием. В Unpoly они исчезают автоматически, но можно управлять временем видимости:

up.notify("Форма отправлена", {
  duration: 5000 // миллисекунды
});
  • После duration элемент удаляется из DOM.
  • Если duration не указан, используется значение по умолчанию, соответствующее длительности озвучивания.

Встраивание уведомлений в действия пользователя

Unpoly тесно интегрируется с событиями, что позволяет создавать уведомления при определённых действиях:

up.on('up:afterSwap', function(event) {
  up.notify("Содержимое обновлено");
});
  • Событие up:afterSwap срабатывает после замены содержимого фрагмента страницы.
  • Аналогично можно использовать события форм (up:form:submitted) или ссылок (up:link:clicked).

Стилизация и визуальная доступность

Хотя основная задача уведомлений — озвучивание, визуальные индикаторы тоже важны для пользователей с частичной зрительной функцией:

  • Контейнер уведомлений можно оформить с помощью CSS, чтобы текст был читаем, но не мешал основному интерфейсу.
  • Пример минимального стиля:
#custom-announcements {
  position: absolute;
  left: -9999px;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

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

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

  • Использовать up.notify вместо ручного создания элементов с aria-live, чтобы избежать ошибок в DOM.
  • Подбирать приоритет уведомления исходя из важности информации.
  • Интегрировать уведомления с событиями Unpoly для автоматического информирования пользователей после действий без лишнего кода.
  • Сочетать визуальные подсказки и озвучивание для обеспечения максимальной доступности интерфейса.

Эффективная работа с объявлениями для скринридеров в Unpoly позволяет сделать динамический интерфейс полностью доступным, улучшая опыт пользователей с нарушениями зрения и поддерживая стандарты ARIA.

Оглавление