Уведомления и live regions

Современные веб-приложения активно используют динамическое обновление интерфейса: сообщения об ошибках, уведомления о сохранении данных, обновления чатов, изменение состояния загрузки и множество других событий. Такие изменения часто происходят без перезагрузки страницы и без явного перемещения фокуса.

Для пользователей вспомогательных технологий подобные обновления могут оставаться незаметными, если не применяются механизмы уведомления. Стандарт WAI-ARIA вводит специальный механизм — live regions (живые области), позволяющий программно объявлять изменения содержимого страницы.

Live region сообщает экранным считывателям о том, что содержимое внутри определённого элемента может обновляться динамически и должно быть озвучено пользователю.

Библиотека aria-query предоставляет программный доступ к информации о ролях ARIA, их свойствах и связанных атрибутах. Это позволяет инструментам разработки, анализаторам доступности и линтерам проверять корректность использования live regions и ролей уведомлений.

Концепция live regions

Live region — это область документа, изменения которой должны быть автоматически объявлены вспомогательным технологиям.

Основной атрибут:

aria-live

Возможные значения:

Значение Поведение
off обновления не объявляются
polite сообщение озвучивается, когда пользователь не занят
assertive объявляется немедленно, прерывая текущую речь

Пример:

<div aria-live="polite">
  Сообщения системы
</div>

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

Связанные атрибуты ARIA

Live regions используют несколько дополнительных атрибутов.

aria-atomic

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

aria-atomic="true"

Если значение true, экранный считыватель объявляет полный текст региона.

aria-relevant

Определяет, какие изменения считаются значимыми:

aria-relevant="additions"
aria-relevant="removals"
aria-relevant="text"
aria-relevant="all"

Например:

<div aria-live="polite" aria-relevant="additions">
</div>

Озвучиваются только добавленные элементы.

aria-busy

Сообщает вспомогательным технологиям, что регион временно обновляется.

aria-busy="true"

После завершения обновления значение изменяется на false.

Предопределённые роли live regions

Некоторые ARIA-роли уже включают поведение live region.

Наиболее распространённые:

Роль Поведение
alert срочное сообщение
status статусное уведомление
log журнал сообщений
timer таймер
marquee динамическая строка

Каждая роль имеет встроенные настройки aria-live.

Например:

alert → aria-live="assertive"
status → aria-live="polite"

Использование aria-query для анализа live regions

Библиотека aria-query содержит структурированные данные о ролях ARIA и их свойствах.

Основные экспортируемые структуры:

roles
elementRoles
roleElements
aria

Информация о live regions хранится в описаниях ролей.

Импорт:

import { roles } from "aria-query";

Каждая роль представлена объектом с набором свойств.

Пример получения роли:

const alertRole = roles.get("alert");

console.log(alertRole);

Структура содержит метаданные:

{
  abstract: false,
  accessibleNameRequired: false,
  props: { ... },
  requiredProps: { ... },
  superClass: [...]
}

Определение ролей уведомлений

Некоторые роли напрямую связаны с live regions.

Проверка роли alert:

const alertRole = roles.get("alert");

console.log(alertRole.props);

Вывод покажет доступные атрибуты, включая:

aria-atomic
aria-live
aria-relevant

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

Получение списка live region ролей

С использованием aria-query можно программно определить роли, которые используются для уведомлений.

Пример:

import { roles } from "aria-query";

const liveRegionRoles = [];

for (const [name, role] of roles) {
  if (role.props["aria-live"] !== undefined) {
    liveRegionRoles.push(name);
  }
}

console.log(liveRegionRoles);

Результат:

["alert", "status", "log", "timer", "marquee"]

Подобная логика используется линтерами доступности.

Проверка допустимых атрибутов для ролей

aria-query позволяет определить, допустим ли конкретный атрибут для выбранной роли.

Пример проверки:

const statusRole = roles.get("status");

const supportsLive = "aria-live" in statusRole.props;

console.log(supportsLive);

Это важно для анализа HTML-разметки и обнаружения ошибок.

Связь ролей и HTML-элементов

aria-query содержит таблицу соответствия ролей и элементов.

Импорт:

import { elementRoles } from "aria-query";

Пример получения ролей для элемента:

const rolesForDiv = elementRoles.get({
  name: "div"
});

Результат может содержать:

log
status
alert

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

Анализ DOM и обнаружение live regions

aria-query часто применяется в инструментах статического анализа.

Алгоритм обнаружения live region:

  1. найти элементы с aria-live
  2. определить роли
  3. проверить допустимость атрибутов
  4. выявить конфликты

Пример:

function isLiveRegion(node) {
  return (
    node.hasAttribute("aria-live") ||
    node.getAttribute("role") === "alert" ||
    node.getAttribute("role") === "status"
  );
}

aria-query используется для проверки корректности роли.

Проверка обязательных свойств

Некоторые роли имеют обязательные атрибуты.

Пример получения requiredProps:

const logRole = roles.get("log");

console.log(logRole.requiredProps);

Инструменты линтинга используют эту информацию для выявления ошибок разметки.

Взаимодействие live regions и JavaScript

Live regions обновляются через обычные операции DOM.

Пример:

const status = document.getElementById("status");

function showMessage(message) {
  status.textContent = message;
}

HTML:

<div id="status" role="status"></div>

Экранный считыватель автоматически объявит новое сообщение.

Очередность объявлений

Live regions формируют очередь сообщений.

Приоритет зависит от aria-live.

Приоритет Тип
высокий assertive
обычный polite

assertive может прерывать текущую озвучку.

Проблемы чрезмерных уведомлений

Частые обновления live regions приводят к:

  • перегрузке голосового интерфейса
  • потере контекста
  • раздражению пользователей

Распространённая ошибка — обновление текста каждые несколько миллисекунд.

Использование aria-query в линтерах доступности

Многие инструменты анализа используют aria-query:

  • ESLint плагины
  • React accessibility lint rules
  • статические анализаторы HTML

Типичный процесс:

  1. анализ JSX или HTML
  2. определение роли
  3. проверка разрешённых атрибутов
  4. выявление конфликтов

aria-query служит источником стандартизированных данных ARIA.

Пример проверки роли alert

import { roles } from "aria-query";

function isAlertRole(roleName) {
  return roles.has(roleName) && roleName === "alert";
}

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

Анализ вложенных live regions

Наличие вложенных live regions может создавать конфликт уведомлений.

Пример нежелательной структуры:

<div aria-live="polite">
  <div aria-live="assertive">
    Сообщение
  </div>
</div>

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

Инструменты анализа могут использовать aria-query для выявления подобных ситуаций.

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

Live regions должны обновляться только при необходимости.

Рекомендуемые практики:

  • объединение сообщений
  • использование очереди уведомлений
  • задержка обновлений

Пример:

let queue = [];

function notify(message) {
  queue.push(message);

  if (queue.length === 1) {
    processQueue();
  }
}

Проверка поддерживаемых атрибутов ARIA

aria-query содержит таблицу всех ARIA-атрибутов.

Импорт:

import { aria } from "aria-query";

Проверка атрибута:

const ariaLive = aria.get("aria-live");

console.log(ariaLive);

Информация включает:

  • тип значения
  • допустимые значения
  • область применения

Использование в React и JSX

Инструменты вроде eslint-plugin-jsx-a11y используют aria-query для анализа компонентов.

Пример JSX:

<div role="status">
  Файл успешно сохранён
</div>

Линтер проверяет:

  • допустимость роли
  • корректность атрибутов
  • семантическую совместимость

Проверка конфликтов ролей

aria-query помогает обнаружить недопустимые комбинации.

Пример:

const role = roles.get("alert");

console.log(role.superClass);

Система наследования ролей позволяет инструментам проверять семантическую корректность.

Автоматизация тестирования доступности

aria-query активно применяется в автоматизированных тестах:

  • анализ HTML
  • тестирование компонентов
  • проверка соответствия стандартам ARIA

Инструменты тестирования используют библиотеку как источник данных спецификации.

Структура данных ролей

Каждая роль содержит несколько важных полей:

поле описание
abstract абстрактная роль
props поддерживаемые ARIA-атрибуты
requiredProps обязательные свойства
superClass иерархия ролей
accessibleNameRequired требуется ли имя

Эта информация позволяет строить сложные правила проверки.

Значение live regions для доступности

Live regions являются ключевым механизмом доступности для динамических приложений. Они обеспечивают синхронизацию визуального интерфейса и интерфейсов вспомогательных технологий.

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

Оглавление