Автоматическое исправление ошибок

При разработке интерфейсов с соблюдением стандартов доступности часто возникают ситуации, когда атрибуты ARIA используются некорректно: применяются неподдерживаемые роли, указываются несовместимые свойства, либо значения атрибутов не соответствуют спецификации. Подобные ошибки ухудшают работу вспомогательных технологий и нарушают семантику документа.

Библиотека aria-query предоставляет структурированные данные о ролях, состояниях и свойствах ARIA. Эти данные используются инструментами анализа кода, линтерами, валидаторами и автоматическими системами исправления. На основе описаний ролей и атрибутов можно не только обнаруживать нарушения, но и формировать механизмы автоматической коррекции.

Автоматическое исправление ошибок — это процесс программного анализа разметки или JSX-кода с последующим внесением корректных изменений на основе официальной модели ARIA.

Источник данных для исправлений

Библиотека предоставляет несколько ключевых коллекций, содержащих нормативные данные:

1. roles

Содержит карту ролей ARIA и их характеристик:

  • поддерживаемые свойства
  • обязательные атрибуты
  • допустимые контексты
  • связанные HTML-элементы

2. aria

Определяет свойства и состояния ARIA:

  • допустимые значения
  • тип атрибута
  • область применения

3. elementRoles

Связывает HTML-элементы с ролями ARIA.

4. roleElements

Позволяет определить, какие элементы соответствуют определённой роли.

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

Основные категории ошибок

Автоматическое исправление обычно касается нескольких распространённых типов нарушений.

Некорректная роль

Пример:

<div role="buton"></div>

Ошибка — опечатка в значении role.

Алгоритм исправления:

  1. Проверка существования роли в roles
  2. Поиск наиболее близкого совпадения
  3. Замена значения

Исправленная версия:

<div role="button"></div>

Недопустимый атрибут для роли

Некоторые атрибуты допустимы только для определённых ролей.

Пример ошибки:

<div role="button" aria-checked="true"></div>

Свойство aria-checked не применяется к роли button.

Алгоритм:

  1. Получение роли
  2. Проверка допустимых свойств в roles.get(role).props
  3. Удаление или замена атрибута

Исправление:

<div role="checkbox" aria-checked="true"></div>

или

<div role="button"></div>

Решение зависит от контекста.

Отсутствие обязательных атрибутов

Некоторые роли требуют обязательные ARIA-свойства.

Пример:

<div role="slider"></div>

Для slider требуются:

  • aria-valuemin
  • aria-valuemax
  • aria-valuenow

Алгоритм исправления:

  1. Получение requiredProps
  2. Проверка присутствия
  3. Добавление недостающих значений

Результат:

<div
  role="slider"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="0"
></div>

Программная проверка роли

Использование aria-query для проверки роли:

import { roles } from "aria-query";

function isValidRole(role) {
  return roles.has(role);
}

console.log(isValidRole("button")); 
console.log(isValidRole("buton"));

На основе такой проверки строятся механизмы автокоррекции.

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

Каждая роль содержит список допустимых ARIA-свойств.

Пример:

import { roles } from "aria-query";

const buttonRole = roles.get("button");

console.log(buttonRole.props);

Результат представляет объект вида:

{
  "aria-expanded": null,
  "aria-pressed": null
}

Алгоритм исправления:

  1. Получение списка разрешённых атрибутов
  2. Сравнение с фактическими
  3. Удаление недопустимых

Проверка корректности значения ARIA

Некоторые свойства принимают ограниченный набор значений.

Пример:

<div aria-hidden="maybe"></div>

Значение maybe недопустимо.

Проверка через aria:

import { aria } from "aria-query";

const attr = aria.get("aria-hidden");

console.log(attr.type);

Тип boolean означает допустимые значения:

true
false

Автоматическая коррекция:

<div aria-hidden="false"></div>

Алгоритм автоматического исправления

Процесс автокоррекции обычно состоит из нескольких этапов.

1. Парсинг разметки

HTML или JSX преобразуется в AST (абстрактное синтаксическое дерево).

Популярные инструменты:

  • Babel
  • ESLint parser
  • HTML parsers

2. Поиск ARIA-атрибутов

Выделяются:

  • role
  • aria-*

Пример узла AST:

{
  "name": "div",
  "attributes": [
    { "name": "role", "value": "buton" }
  ]
}

3. Проверка роли

if (!roles.has(roleValue)) {
  const corrected = suggestRole(roleValue);
}

Алгоритм suggestRole может использовать:

  • расстояние Левенштейна
  • словарь ролей

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

const roleDefinition = roles.get(roleValue);

const allowedProps = Object.keys(roleDefinition.props);

Сравнение с фактическими атрибутами.

5. Проверка обязательных свойств

const required = roleDefinition.requiredProps;

Если свойство отсутствует — оно добавляется.

6. Исправление значений

Проверка через aria:

import { aria } from "aria-query";

function isValidValue(attr, value) {
  const def = aria.get(attr);
  
  if (def.type === "boolean") {
    return value === "true" || value === "false";
  }
}

Пример реализации автокорректора

Упрощённый пример функции:

import { roles, aria } from "aria-query";

function fixAriaAttributes(node) {
  const roleAttr = node.attributes.find(a => a.name === "role");

  if (roleAttr && !roles.has(roleAttr.value)) {
    roleAttr.value = "button";
  }

  if (roleAttr) {
    const roleDef = roles.get(roleAttr.value);
    const allowedProps = Object.keys(roleDef.props);

    node.attributes = node.attributes.filter(attr => {
      if (!attr.name.startsWith("aria-")) return true;
      return allowedProps.includes(attr.name);
    });
  }

  return node;
}

Такая функция может применяться в инструментах автоматического форматирования кода.

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

aria-query активно используется линтерами доступности, например:

  • ESLint plugins
  • accessibility validators
  • JSX analyzers

Линтер выполняет следующие действия:

  1. обнаруживает нарушение
  2. предлагает исправление
  3. применяет autofix

Пример правила ESLint:

aria-props

Ошибка:

Invalid ARIA property aria-cheked

Автоисправление:

aria-checked

Контекстные исправления

Некоторые ошибки нельзя исправить без анализа HTML-контекста.

Пример:

<li role="button"></li>

Элемент li обычно используется внутри ul или ol.

Автокорректор может предложить:

<button></button>

или

<li role="menuitem"></li>

Для этого используется информация из elementRoles.

Использование elementRoles

Пример получения ролей для элемента:

import { elementRoles } from "aria-query";

for (const [element, rolesSet] of elementRoles) {
  console.log(element, rolesSet);
}

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

  • определить рекомендуемую роль
  • заменить неправильную

Использование roleElements

Обратная операция — поиск элементов для роли.

import { roleElements } from "aria-query";

const buttonElements = roleElements.get("button");

console.log(buttonElements);

Применение:

  • предложение более подходящего HTML-элемента
  • автоматическая замена div role="button" на <button>

Преобразование ролей в нативные элементы

Автокоррекция часто выполняет семантическое улучшение.

Исходный код:

<div role="button" tabindex="0"></div>

Исправление:

<button></button>

Преимущества:

  • встроенная поддержка клавиатуры
  • меньше ARIA-атрибутов
  • улучшенная доступность

Интеграция с инструментами форматирования

Автоматические исправления могут выполняться:

  • во время сборки
  • в редакторе кода
  • при запуске линтера
  • в CI/CD

Типичная цепочка:

AST parser → aria-query validation → autofix → code generator

Ограничения автоматической коррекции

Несмотря на наличие полной модели ARIA, существуют ограничения.

1. Недостаток контекста

Инструмент не всегда понимает логику интерфейса.

2. Потенциальная потеря поведения

Замена элементов может повлиять на CSS или JavaScript.

3. Частичная корректность

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

Поэтому большинство систем применяют консервативную стратегию:

  • исправление только очевидных ошибок
  • предупреждения для сложных случаев

Расширенные стратегии исправления

В сложных инструментах используются дополнительные методы.

Семантический анализ DOM

Определение:

  • родительских элементов
  • структуры списка
  • роли контейнера

Анализ событий

Если элемент с ролью button содержит обработчик onClick, система может предложить замену на <button>.

ML-подходы

В некоторых системах используются модели машинного обучения, которые:

  • анализируют большие репозитории
  • определяют типичные шаблоны исправлений
  • предлагают наиболее вероятные изменения

Производительность

aria-query представляет данные в виде Map-структур, что обеспечивает быстрый доступ:

roles.has(role)
roles.get(role)
aria.get(attribute)

Поиск выполняется за O(1).

Это позволяет применять автоматическую проверку и исправление даже в больших кодовых базах.

Архитектура системы автокоррекции

Типичная структура:

Parser
   ↓
AST Analyzer
   ↓
ARIA Validator (aria-query)
   ↓
Fix Generator
   ↓
Code Transformer

Каждый этап изолирован и может быть заменён.

Практическое значение

Автоматическое исправление ошибок ARIA снижает количество проблем доступности в интерфейсах:

  • предотвращает неправильное использование ролей
  • исправляет опечатки в атрибутах
  • добавляет обязательные свойства
  • улучшает семантику HTML

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

Оглавление