Глобальные атрибуты

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

Определение глобальных атрибутов

Глобальные атрибуты — это свойства ARIA, которые могут быть применены к любому элементу без ограничения на конкретную роль. В библиотеке Aria-query они представлены через коллекцию globalStates и globalProperties.

Примеры глобальных атрибутов:

  • aria-label — текстовая метка для элемента, используемая скринридерами.
  • aria-labelledby — связывает элемент с другим элементом, который содержит описание.
  • aria-hidden — управляет видимостью элемента для вспомогательных технологий.
  • aria-describedby — указывает на элемент, предоставляющий дополнительное описание.
  • aria-atomic — определяет, будут ли скринридеры читать обновления полностью или частично.
  • aria-live — указывает, как скринридеры должны оповещать о динамических изменениях.
  • aria-relevant — указывает, какие изменения контента должны отслеживаться.

Все эти атрибуты универсальны и могут применяться к любому HTML-элементу, что позволяет создавать доступные интерфейсы без привязки к конкретной роли.

Структура данных глобальных атрибутов в Aria-query

Библиотека предоставляет глобальные атрибуты в виде объектов с определёнными полями:

import { aria } from 'aria-query';

const globalAttributes = aria.globalStates;

Каждый атрибут содержит:

  • name — имя атрибута (aria-label, aria-hidden и т.д.).
  • type — тип значения (string, boolean, token, tristate).
  • defaultValue — значение по умолчанию (если оно определено).
  • values — допустимые значения (для токенов и булевых атрибутов).

Пример структуры атрибута aria-hidden:

{
  "name": "aria-hidden",
  "type": "boolean",
  "defaultValue": false
}

Для aria-live:

{
  "name": "aria-live",
  "type": "token",
  "values": ["off", "polite", "assertive"],
  "defaultValue": "off"
}

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

Использование глобальных атрибутов

  1. Валидация атрибутов Aria-query позволяет определить, применим ли атрибут к конкретной роли, и проверить корректность значений:
import { roles, aria } from 'aria-query';

const buttonRole = roles.get('button');
const globalAttrs = aria.globalStates;

console.log(buttonRole.props.has('aria-label')); // true
  1. Генерация доступного DOM Для динамических компонентов удобно использовать глобальные атрибуты как шаблон для установки ARIA-свойств:
const elementAttributes = {
  'aria-label': 'Закрыть окно',
  'aria-hidden': false
};
  1. Тестирование интерфейсов Глобальные атрибуты позволяют создавать автоматические проверки доступности, например, убедиться, что все интерактивные элементы имеют aria-label или aria-labelledby.

Взаимодействие глобальных атрибутов с ролями

Хотя глобальные атрибуты применимы ко всем элементам, некоторые роли могут иметь приоритетные свойства, которые перекрывают поведение глобальных атрибутов. Например:

  • Роль button всегда требует, чтобы aria-pressed имел смысл только для тоггл-кнопок, хотя атрибут доступен глобально.
  • Роль textbox может игнорировать aria-checked, даже если он указан, так как это не релевантно для текстового поля.

Aria-query хранит эти зависимости, что позволяет строить интеллектуальные проверки на соответствие спецификации ARIA.

Токенизированные глобальные атрибуты

Некоторые глобальные атрибуты имеют ограниченный набор допустимых значений:

  • aria-live → off, polite, assertive
  • aria-atomic → true, false
  • aria-relevant → additions, removals, text, all

Эти значения определены в библиотеке как Set объектов, что позволяет:

  • проверять корректность значения;
  • динамически формировать список допустимых значений для компонентов;
  • предотвращать ошибки во время разработки.
const ariaAtomicValues = aria.globalStates.get('aria-atomic').values;
console.log(ariaAtomicValues.has('true')); // true

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

  1. Доступные модальные окна Использование aria-hidden для скрытия заднего фона и aria-label для кнопок закрытия.

  2. Обновляемые уведомления Применение aria-live и aria-atomic для динамических сообщений, чтобы скринридеры корректно оповещали пользователей.

  3. Формы и интерактивные элементы Универсальные атрибуты aria-describedby и aria-labelledby связывают поля с описаниями и ошибками, обеспечивая доступность форм.

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

Оглавление