Живые регионы

Живые регионы (ARIA live regions) — это области веб-страницы, в которых динамически обновляемый контент должен быть доступен для технологий помощи, таких как экранные чтецы. Они позволяют пользователям получать актуальную информацию без необходимости вручную перезагружать страницу или перемещаться к обновлённому элементу.

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

Основные понятия живых регионов

Живой регион определяется с помощью атрибута aria-live. Его значения:

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

Дополнительно могут использоваться атрибуты:

  • aria-atomic: если true, полностью пересылается всё содержимое региона при обновлении; если false, только изменённая часть.
  • aria-relevant: указывает, какие изменения следует объявлять (additions, removals, text).

Работа с Aria-query

Aria-query предоставляет два ключевых объекта:

  1. Roles — коллекция ролей ARIA с их свойствами и поддержкой атрибутов. Позволяет определить, какие роли поддерживают aria-live:

    import { roles } from 'aria-query';

const liveRoles = Array.from(roles.keys()).filter(role => {
  const roleProps = roles.get(role);
  return roleProps.props.has('aria-live');
});

console.log(liveRoles); // ['alert', 'log', 'status', ...]

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

  2. Properties — коллекция всех ARIA-свойств, включая aria-live, с их допустимыми значениями и типами:

    import { properties } from 'aria-query';

const ariaLiveProp = properties.get('aria-live');
console.log(ariaLiveProp); 
// { type: 'token', values: ['off', 'polite', 'assertive'] }

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

Программное создание живого региона

Используя Aria-query вместе с DOM, можно создавать элементы с корректной ARIA-разметкой:

import { properties, roles } from 'aria-query';

function createLiveRegion(role = 'status', live = 'polite', atomic = true) {
  if (!roles.has(role)) {
    throw new Error(`Роль ${role} не поддерживается`);
  }

  const region = document.createElement('div');
  region.setAttribute('role', role);
  region.setAttribute('aria-live', live);
  region.setAttribute('aria-atomic', atomic.toString());
  return region;
}

const statusRegion = createLiveRegion();
document.body.appendChild(statusRegion);

Этот подход гарантирует:

  • правильную роль региона;
  • допустимое значение aria-live;
  • корректное управление атомарностью обновлений.

Валидация и анализ существующих живых регионов

Aria-query облегчает проверку структуры ARIA на странице:

const liveRegions = Array.from(document.querySelectorAll('[aria-live]')).filter(el => {
  const role = el.getAttribute('role') || 'region';
  return roles.has(role) && roles.get(role).props.has('aria-live');
});

liveRegions.forEach(region => {
  console.log(region.getAttribute('role'), region.getAttribute('aria-live'));
});

Это позволяет:

  • находить элементы с неправильно заданными атрибутами;
  • определять регионы, которые не соответствуют стандартам ARIA;
  • создавать автоматизированные тесты доступности.

Комбинирование aria-relevant и aria-atomic

При динамическом обновлении контента важно корректно управлять:

  • aria-relevant — указывает, что именно считать изменённым (additions, removals, text);
  • aria-atomic — определяет, передавать ли все содержимое или только изменённую часть.

Пример динамического обновления:

const region = createLiveRegion('log', 'assertive', false);
region.setAttribute('aria-relevant', 'additions text');

function updateRegion(message) {
  const p = document.createElement('p');
  p.textContent = message;
  region.appendChild(p);
}

updateRegion('Новая запись в журнале');

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

Практическое использование

Живые регионы применяются для:

  • уведомлений о состоянии (status, alert);
  • логов и сообщений об ошибках (log);
  • интерактивных интерфейсах с динамическим контентом, таких как чаты или формы.

Aria-query позволяет:

  • гарантировать корректность ARIA-атрибутов;
  • проверять соответствие ролей и свойств;
  • автоматизировать создание и анализ живых регионов.

Использование библиотеки повышает качество доступности интерфейсов, сокращает количество ошибок и упрощает поддержку динамического контента.

Оглавление