ARIARoleDefinition

Библиотека Aria-query является мощным инструментом для работы с ARIA-ролями, свойствами и состояниями в JavaScript. Центральным элементом структуры данных является объект ARIARoleDefinition, который описывает характеристики каждой ARIA-роли и её взаимодействие с элементами DOM.

Основная структура ARIARoleDefinition

Объект ARIARoleDefinition представляет собой словарь, где ключами являются названия ролей (например, button, checkbox, dialog), а значениями — объект с описанием ролей. Стандартное представление роли включает следующие свойства:

  • abstract — булево значение (true/false), указывающее, является ли роль абстрактной. Абстрактные роли не применяются напрямую к элементам DOM, они служат только для наследования и структурирования.

  • baseConcepts — массив объектов, описывающих базовые концепты HTML, к которым соответствует роль. Каждый объект может содержать свойства:

    • concept — строка с HTML-тегом (button, input и др.).
    • attributes — объект с ключами атрибутов и их значениями.

  • childrenPresentational — булево значение. Если true, дочерние элементы роли рассматриваются как декоративные и не учитываются в accessibility tree.

  • requiredContextRole — массив ролей, которые должны присутствовать в контексте родителя для корректного применения роли.

  • requiredOwnedElements — массив объектов с описанием элементов, которые должны быть вложены в элемент с этой ролью.

  • prohibitedProps — массив строк, содержащий имена ARIA-свойств, запрещённых для данной роли.

  • props — объект с описанием разрешённых свойств и их возможных значений.

  • superClass — массив строк, перечисляющий роли, от которых наследуется данная роль. Это позволяет определить иерархию ролей и унаследованные свойства.

Пример минимального определения роли button:

{
  button: {
    abstract: false,
    baseConcepts: [
      { concept: 'button', attributes: {} }
    ],
    childrenPresentational: false,
    requiredContextRole: [],
    requiredOwnedElements: [],
    prohibitedProps: ['aria-checked', 'aria-selected'],
    props: {
      'aria-pressed': null
    },
    superClass: ['command']
  }
}

Свойство baseConcepts

Свойство baseConcepts играет ключевую роль в сопоставлении ARIA-ролей с HTML-элементами. Например, роль checkbox имеет базовую концепцию input[type="checkbox"], что позволяет инструментам тестирования и вспомогательным технологиям правильно интерпретировать элемент. Это свойство особенно важно при создании кастомных компонентов, которые должны оставаться доступными.

Наследование через superClass

Система наследования ARIA-ролей реализована через массив superClass. Например, button наследует свойства роли command, которая, в свою очередь, может наследовать свойства от абстрактной роли widget. Это позволяет сократить дублирование свойств и стандартизировать поведение ролей.

Пример иерархии:

widget
 └─ command
     └─ button

Такое наследование обеспечивает возможность проверки доступности без необходимости дублировать описание всех свойств в каждой конкретной роли.

Управление ARIA-свойствами

Свойство props в ARIARoleDefinition определяет, какие ARIA-свойства допустимы для роли и какие значения они могут принимать. Значения могут быть:

  • boolean (true / false)
  • tristate (true / false / mixed)
  • token (предопределённые строки, например 'horizontal' | 'vertical')
  • string (любой текст)

Пример роли progressbar:

progressbar: {
  abstract: false,
  baseConcepts: [
    { concept: 'progress', attributes: {} }
  ],
  childrenPresentational: true,
  requiredContextRole: [],
  requiredOwnedElements: [],
  prohibitedProps: ['aria-checked'],
  props: {
    'aria-valuemin': null,
    'aria-valuemax': null,
    'aria-valuenow': null,
    'aria-valuetext': null
  },
  superClass: ['range', 'widget']
}

Ограничения контекста и обязательные дочерние элементы

  • requiredContextRole используется для ролей, которые не могут существовать вне определённого контекста. Например, listitem должен находиться внутри list.
  • requiredOwnedElements задаёт обязательные вложенные элементы. Например, роль menu может требовать наличие элементов с ролью menuitem в качестве потомков.

Применение в реальных проектах

Использование ARIARoleDefinition позволяет:

  1. Проверять соответствие компонентов требованиям ARIA.
  2. Автоматически генерировать доступные HTML-компоненты на основе кастомных UI-библиотек.
  3. Упрощать создание тестов доступности и статический анализ компонентов.
  4. Структурировать собственные роли и свойства в больших проектах, минимизируя ошибки при наследовании.

Интеграция с другими инструментами

Aria-query часто используется вместе с линтерами доступности, такими как eslint-plugin-jsx-a11y, где ARIARoleDefinition служит источником истины для допустимых ARIA-ролей и свойств. Это позволяет выявлять:

  • Использование запрещённых ARIA-свойств.
  • Неправильное расположение элементов в дереве DOM.
  • Несовместимость ролей с базовыми HTML-концептами.

Вывод

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

Оглавление