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

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

Aria-query строится вокруг трёх ключевых понятий: roles, attributes и element-role mappings. Каждое из них имеет подробную структуру и взаимозависимости.

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

Структура ролей и их атрибутов

Каждая ARIA-роль описывается объектом с набором стандартных свойств:

  • name – уникальное имя роли;
  • abstract – булево значение, указывающее, является ли роль абстрактной;
  • superClass – массив ролей, от которых наследуются свойства;
  • requiredProps – список обязательных ARIA-атрибутов для этой роли;
  • props – дополнительные, необязательные атрибуты, которые могут использоваться для конкретной роли.

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

Пример объекта роли:

{
  name: "button",
  abstract: false,
  superClass: ["widget"],
  requiredProps: [],
  props: {
    "aria-pressed": { type: "tristate", values: [true, false, "mixed"] }
  }
}

Здесь роль button наследует свойства от widget и может дополнительно использовать атрибут aria-pressed с тремя допустимыми значениями.

Идентификация дополнительных атрибутов

Дополнительные атрибуты props важны для правильной интерпретации интерфейсов вспомогательными технологиями. В Aria-query они учитываются через объект attributes:

  • Ключ объекта – имя атрибута (aria-label, aria-hidden, aria-checked);
  • Значение – объект с типом данных, допустимыми значениями и метаданными (например, наследуемость).

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

const { attributes } = require('aria-query');

const ariaLabel = attributes.get('aria-label');
console.log(ariaLabel.type); // string

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

Соответствие элементов и атрибутов

Каждому HTML-элементу соответствует набор возможных ролей и атрибутов. Aria-query хранит это в виде elementRoleMap, где:

  • Ключ – имя HTML-элемента (div, button, ul);
  • Значение – множество допустимых ролей для данного элемента.

Дополнительные атрибуты, указанные в props, проверяются на соответствие элементу и роли. Например, для div с ролью button можно использовать aria-pressed, а для input type="checkbox" — aria-checked.

Пример проверки:

const { elementRoleMap, roles } = require('aria-query');

const divRoles = elementRoleMap.get('div');
if (divRoles.has('button')) {
  const buttonProps = roles.get('button').props;
  console.log(buttonProps['aria-pressed']); // { type: "tristate", values: [true, false, "mixed"] }
}

Наследование и комбинирование атрибутов

Роли могут наследовать дополнительные атрибуты от superClass. При проверке интерфейса важно учитывать:

  1. Атрибуты родительской роли становятся допустимыми для дочерней роли.
  2. При конфликте атрибутов дочерняя роль переопределяет свойства родительской.
  3. Некоторые атрибуты могут быть conditionally required, то есть обязательны только в определенных контекстах (например, aria-labelledby при отсутствии aria-label).

Пример получения всех доступных атрибутов роли с учетом наследования:

function getAllProps(roleName) {
  const role = roles.get(roleName);
  let allProps = { ...role.props };
  
  role.superClass.forEach(superRoleName => {
    const superProps = getAllProps(superRoleName);
    allProps = { ...superProps, ...allProps };
  });
  
  return allProps;
}

const buttonAllProps = getAllProps('button');
console.log(buttonAllProps);

Проверка корректности дополнительных атрибутов

Для валидации интерфейса используются методы, которые:

  1. Сопоставляют элемент с допустимыми ролями;
  2. Определяют обязательные и дополнительные атрибуты для каждой роли;
  3. Проверяют соответствие значений типов, допустимых значений и комбинаций.

Пример функции проверки:

function validateProps(roleName, propsToCheck) {
  const allProps = getAllProps(roleName);
  for (const [prop, value] of Object.entries(propsToCheck)) {
    if (!allProps[prop]) {
      console.warn(`${prop} не допустим для роли ${roleName}`);
    } else if (allProps[prop].values && !allProps[prop].values.includes(value)) {
      console.warn(`${prop} имеет недопустимое значение: ${value}`);
    }
  }
}

validateProps('button', { 'aria-pressed': 'mixed', 'aria-hidden': true });

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

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

  • Использовать props для динамических интерфейсов, где состояние ролей может меняться.
  • Проверять наследуемые атрибуты перед добавлением новых свойств.
  • Комбинировать elementRoleMap и roles, чтобы исключить некорректные комбинации элементов и атрибутов.
  • Обрабатывать условные обязательные атрибуты, чтобы интерфейс оставался доступным для вспомогательных технологий.

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

Оглавление