Создание DevTools расширений

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

Главный модуль библиотеки экспортирует три ключевых объекта:

  • roles – карта всех ARIA-ролей с их свойствами и поддержкой концепций наследования;
  • elementRoles – сопоставление HTML-элементов с ролями по умолчанию;
  • ariaAttributes – набор всех стандартных ARIA-атрибутов с типами значений.

Каждый объект представлен в виде Map, что обеспечивает быстрый доступ и удобную фильтрацию.

Работа с ролями

Получение всех ролей

import { roles } from 'aria-query';

for (const [roleName, roleDefinition] of roles) {
  console.log(roleName, roleDefinition);
}

Ключевые моменты:

  • roleDefinition включает:

    • abstract – логическое значение, показывающее, является ли роль абстрактной;
    • baseConcepts – список HTML-элементов, с которыми роль ассоциирована по умолчанию;
    • props – свойства роли и их типы (boolean, string, tokenlist и др.);
    • requiredProps – обязательные свойства для корректного использования роли.

Проверка поддерживаемых свойств

const buttonRole = roles.get('button');
console.log(buttonRole.props.has('aria-pressed')); // true или false

Это позволяет расширениям DevTools проверять, корректно ли применены ARIA-атрибуты к элементам на странице.

Сопоставление элементов и ролей

elementRoles позволяет определить, какие роли по умолчанию применяются к HTML-элементам:

import { elementRoles } from 'aria-query';

const rolesForDiv = elementRoles.get('div');
console.log([...rolesForDiv]); // Set { 'generic', 'region' }
  • Каждый элемент может соответствовать множеству ролей.
  • Поддержка наследования: если элемент вложен в ARIA-контейнер, роль может автоматически расширять доступные свойства.

Это важно при создании расширений для DevTools, когда нужно динамически анализировать DOM и выдавать рекомендации по улучшению доступности.

Работа с атрибутами ARIA

ariaAttributes предоставляет данные обо всех стандартизованных ARIA-атрибутах:

import { ariaAttributes } from 'aria-query';

for (const [attrName, attrDefinition] of ariaAttributes) {
  console.log(attrName, attrDefinition.type);
}
  • type описывает допустимый формат (boolean, tristate, integer, string, idref, idreflist, token, tokenlist).
  • Это позволяет расширению проверять валидность значений атрибутов, предотвращая ошибки валидации ARIA.

Фильтрация и поиск

Aria-query поддерживает удобный поиск и фильтрацию по различным критериям:

// Найти все роли, поддерживающие aria-checked
const checkableRoles = [...roles].filter(([name, def]) =>
  def.props.has('aria-checked')
).map(([name]) => name);

console.log(checkableRoles); // ['checkbox', 'menuitemcheckbox', ...]
  • Это позволяет строить динамические списки рекомендаций для разработчиков.
  • Фильтрацию можно делать по типу атрибутов, обязательным свойствам или наследуемым ролям.

Применение в DevTools расширениях

Использование Aria-query в расширениях позволяет:

  1. Автоматически выявлять нарушения ARIA – проверка ролей и атрибутов в DOM.
  2. Подсвечивать проблемные элементы – на основе данных из roles и ariaAttributes.
  3. Генерировать подсказки по улучшению доступности – например, добавление обязательных атрибутов или исправление неверного типа значения.
  4. Сопоставлять пользовательский интерфейс с ARIA-концепциями – проверка соответствия роли и базовых HTML-элементов.

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

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

function checkAria(element) {
  const tagName = element.tagName.toLowerCase();
  const defaultRoles = elementRoles.get(tagName) || new Set();

  const ariaRole = element.getAttribute('role');
  if (ariaRole && !roles.has(ariaRole)) {
    console.warn(`Неверная роль: ${ariaRole}`);
  }

  for (const [attr, def] of ariaAttributes) {
    if (element.hasAttribute(attr)) {
      // проверка типа значения
      const value = element.getAttribute(attr);
      if (def.type === 'boolean' && !['true', 'false'].includes(value)) {
        console.warn(`Неверное значение ${attr}: ${value}`);
      }
    }
  }
}

Интеграция с DevTools API

Aria-query отлично сочетается с DevTools API:

  • Получение и обход DOM через chrome.devtools.inspectedWindow.eval.
  • Построение интерактивных панелей, где для каждого элемента отображаются допустимые роли и свойства.
  • Реализация Live Validation, когда изменения в DOM мгновенно проверяются на корректность ARIA.

Использование Map объектов из Aria-query обеспечивает высокую производительность при анализе больших страниц.

Расширенные возможности

  • Наследование ролей: Aria-query позволяет определить цепочку наследования и использовать её для проверки поддержки всех свойств.
  • Поддержка кастомных ролей: возможно расширение данных Aria-query для внутренних ролей приложения.
  • Комбинированные фильтры: поиск элементов по множеству атрибутов и ролей одновременно, что полезно при генерации отчётов по доступности.

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

Оглавление