Атрибуты живых регионов

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

Основные ARIA-атрибуты живых регионов

  1. aria-live Определяет степень важности обновлений содержимого для вспомогательных технологий. В Aria-query это значение можно получить и проверить через карту ролей и атрибутов. Возможные значения:

    • off — обновления не озвучиваются.
    • polite — обновления озвучиваются в свободное время, не прерывая текущий поток.
    • assertive — обновления озвучиваются немедленно, прерывая текущий поток.
    const { elementRoles } = require('aria-query');
const roles = elementRoles.get('div');
console.log(roles.has('aria-live')); // Проверка наличия атрибута

  2. aria-atomic Определяет, должно ли озвучиваться только изменённое содержимое или весь регион целиком. Возможные значения:

    • true — весь регион озвучивается при любом изменении.
    • false — озвучивается только изменившаяся часть.

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

    const { elementRoles } = require('aria-query');
const buttonRoles = elementRoles.get('button');
console.log(buttonRoles.has('aria-atomic')); // false, кнопки обычно не поддерживают

  3. aria-relevant Указывает тип изменений, которые должны быть отслежены для озвучивания. Возможные значения:

    • additions — добавление нового содержимого.
    • removals — удаление содержимого.
    • text — изменения текста внутри элемента.
    • all — отслеживаются все изменения.

    Пример проверки совместимости с элементом:

    const liveRegionRoles = elementRoles.get('status');
console.log(liveRegionRoles.has('aria-relevant')); // true

Работа с живыми регионами в Aria-query

Aria-query строит структурированное представление элементов и их ARIA-атрибутов. Это позволяет:

  • Определять, какие элементы могут быть живыми регионами. Например, status, alert и log.
  • Проверять корректность применения атрибутов к этим элементам.
  • Поддерживать автоматизацию тестирования доступности.
const { roles, elementRoles } = require('aria-query');

// Получение всех ролей, которые поддерживают aria-live
const liveRoles = [...roles.entries()]
  .filter(([role, props]) => props.props.has('aria-live'))
  .map(([role]) => role);

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

Рекомендации по использованию

  • aria-live="assertive" использовать только для критически важных уведомлений, чтобы не перегружать пользователя постоянными прерываниями.
  • aria-atomic="true" эффективно при обновлении сложного HTML-содержимого, где важно озвучивать весь контекст.
  • aria-relevant следует настраивать максимально конкретно (additions или text), чтобы избежать лишних оповещений.

Практическое применение в тестах

Aria-query часто используется в сочетании с Jest или другими фреймворками тестирования для проверки ARIA-совместимости компонентов:

const { elementRoles } = require('aria-query');

test('Компонент уведомлений должен поддерживать aria-live', () => {
  const divRoles = elementRoles.get('div');
  expect(divRoles.has('aria-live')).toBe(true);
});

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

Связь атрибутов живых регионов с ролями

Aria-query предоставляет детализированные карты ролей и их свойств. Это значит, что можно точно определить, какие роли требуют обязательного использования aria-live или aria-atomic, а какие могут использовать их опционально. Например:

  • alert — автоматически предполагает aria-live="assertive" и aria-atomic="true".
  • status — рекомендуется aria-live="polite" и aria-atomic="true".
  • log — может использовать aria-relevant="additions text" для отслеживания обновлений.

Использование этих данных позволяет создавать динамические компоненты с корректной доступностью без ручного анализа документации WAI-ARIA.

Оглавление