Документные роли

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

Основные сущности Aria-query

Aria-query содержит три ключевых структуры:

  1. Roles – объект, где ключи — это имена ARIA-ролей, а значения описывают их характеристики.
  2. Properties – набор стандартных свойств, применимых к ролям.
  3. Elements – отображение допустимых HTML-элементов для конкретной роли.

Эти структуры реализованы как карты (Map) и позволяют быстро получать данные о роли или атрибуте.

Пример импорта в Jav * aScript:

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

Роли документа

Роли делятся на структурные и видовые. Структурные роли описывают организацию страницы или документа, видовые — конкретные интерактивные элементы.

Примеры структурных ролей

  • document – основной документ или контентная область.
  • article – независимая часть контента, которая может быть автономно распределена.
  • region – область страницы, которая имеет значимую тематическую цель.
  • banner – область, представляющая заголовок сайта.
  • complementary – вспомогательная область, содержащая контент, дополняющий основной.
  • main – основное содержимое страницы.

Использование в коде:

const docRole = roles.get('document');
console.log(docRole.abstract); // false
console.log(docRole.requiredContext); // []
console.log(docRole.props); // свойства роли, например aria-label

Свойства ролей

Каждая роль в roles имеет набор свойств:

  • abstract – булевое значение, определяющее, является ли роль абстрактной (нельзя напрямую применять в HTML).
  • superClass – массив ролей, от которых наследуются свойства текущей роли.
  • props – свойства ARIA, которые поддерживает роль.
  • requiredContext – роли, в которых может применяться текущая роль.

Пример анализа:

const articleRole = roles.get('article');
console.log(articleRole.superClass); // ['section', 'landmark']
console.log(articleRole.props); // Map { 'aria-label' => {}, 'aria-labelledby' => {} }

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

Aria-query поддерживает отображение ролей на HTML-элементы через elementRoles. Это важно для проверки соответствия ARIA и стандартного HTML.

Пример:

const buttonElements = elementRoles.get('button');
console.log(buttonElements); // Set { 'button', 'input', 'a' }

Для структурных ролей также можно определить допустимые теги:

const regionElements = elementRoles.get('region');
console.log(regionElements); // Set { 'section', 'aside', 'div' }

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

Работа с свойствами ARIA

Библиотека содержит карту всех свойств ARIA (aria). Каждое свойство описано объектом с типом значения и допустимыми вариантами.

Пример:

const ariaLabel = aria.get('aria-label');
console.log(ariaLabel.type); // 'string'
console.log(ariaLabel.values); // undefined, так как любое строковое значение допустимо

Это используется для валидации и автогенерации кода с ARIA.

Инструменты анализа ролей

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

  1. Определять абстрактные роли – полезно для проверки, можно ли роль применять напрямую.
  2. Проверять наследование – роли наследуют свойства и ограничения от суперклассов.
  3. Валидация сочетаний – можно проверить, какие роли могут сосуществовать внутри определенного элемента или региона.
  4. Генерация документации – можно создавать справочные таблицы ARIA-ролей с их свойствами и допустимыми элементами.

Пример проверки абстрактной роли:

roles.forEach((value, key) => {
  if (value.abstract) {
    console.log(`${key} является абстрактной ролью`);
  }
});

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

  1. Линтеры доступности: анализируют HTML-код и проверяют, что роли и свойства ARIA применены корректно.
  2. Генераторы интерфейсов: помогают создавать компоненты с валидной семантикой.
  3. Документация и обучение: строят таблицы ролей, их свойств и допустимых элементов.

Aria-query позволяет автоматизировать все эти процессы без ручного сопоставления HTML и ARIA, обеспечивая точное соответствие стандарту.

Советы по использованию

  • Использовать Map-структуры для быстрого поиска ролей и свойств.
  • Проверять abstract перед применением роли в HTML.
  • Использовать superClass для понимания наследуемых свойств.
  • Соединять данные roles и elementRoles для валидации и генерации интерфейсов.

Библиотека обеспечивает полное покрытие ARIA-ролей и их атрибутов, делая работу с доступностью в JavaScript систематичной и безопасной.

Оглавление