Типы значений атрибутов

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

Основные категории значений ARIA-атрибутов

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

  1. Булевы значения (true / false) Атрибуты с булевым значением обозначают состояние или наличие определённой функциональности. Примеры:

    • aria-hidden
    • aria-disabled
    • aria-checked (частично может быть mixed)

    В aria-query булевы значения представлены как массив фиксированных литералов:

    const booleanValues = ['true', 'false'];

  2. Триггерные состояния (mixed / true / false) Некоторые атрибуты, такие как aria-checked или aria-pressed, допускают промежуточное состояние mixed.

    const triState = ['true', 'false', 'mixed'];

  3. Списочные значения (enumeration) Атрибут может принимать один из ограниченного набора строк. Пример:

    • aria-orientation → 'horizontal' | 'vertical'
    • aria-live → 'off' | 'polite' | 'assertive'

    В aria-query это реализовано через карты значений, где ключи соответствуют разрешённым литералам:

    const orientationValues = {
  horizontal: true,
  vertical: true
};

  4. Числовые значения ARIA допускает использование чисел для выражения позиции или уровня. Примеры:

    • aria-level — уровень заголовка (1, 2, … 6)
    • aria-posinset — позиция элемента в наборе
    • aria-setsize — размер набора

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

  5. Строковые значения (string) Используются для описания или идентификации. Примеры:

    • aria-label — текстовая метка для элемента
    • aria-labelledby — идентификатор элемента, который выполняет роль метки
    • aria-describedby — идентификатор элемента с дополнительным описанием

    Строковые значения в aria-query проверяются на соответствие синтаксису и типу данных (обычно это строка, иногда с ограничениями на формат IDREF).

  6. Ссылочные значения (IDREF / IDREFS) Атрибуты могут ссылаться на один или несколько элементов через их id:

    • aria-labelledby (IDREFS — несколько идентификаторов через пробел)
    • aria-describedby (IDREFS)
    • aria-owns (IDREFS)

    В библиотеке реализованы функции для проверки, что значение состоит из корректных идентификаторов DOM.

  7. Доступные роли и состояния Некоторые атрибуты зависят от роли элемента. Например:

    • aria-checked актуален для checkbox или menuitemcheckbox
    • aria-level только для ролей заголовков (heading)

    aria-query содержит карты совместимости ролей и атрибутов, позволяя точно определить допустимые значения и типы для конкретного элемента.

Работа с типами значений в aria-query

Библиотека предоставляет несколько ключевых структур:

  • ARIAPropertyTypes — определяет тип каждого ARIA-атрибута. Примеры типов:

    • 'boolean'
    • 'tristate'
    • 'token' (одиночное значение из перечисления)
    • 'tokenlist' (несколько значений из перечисления)
    • 'string'
    • 'id'
    • 'idlist'

  • ARIAPropertyValues — содержит все допустимые литералы для перечислимых типов. Например:

    ARIAPropertyValues['aria-orientation'] // { horizontal: true, vertical: true }

  • Проверка совместимости: aria-query позволяет получить список атрибутов для роли и проверить, что переданное значение соответствует ожидаемому типу.

Примеры использования

  1. Проверка значения булевого атрибута:
import { ARIAPropertyTypes } from 'aria-query';

const type = ARIAPropertyTypes.get('aria-hidden'); // 'boolean'
const value = 'true';
const isValid = type === 'boolean' && (value === 'true' || value === 'false'); // true
  1. Получение допустимых литералов для перечислимого атрибута:
import { ARIAPropertyValues } from 'aria-query';

const values = ARIAPropertyValues.get('aria-orientation'); // { horizontal: true, vertical: true }
const isValid = values['horizontal'] !== undefined; // true
  1. Проверка IDREFS:
const ids = 'label1 label2';
const idList = ids.split(' ');
const isValid = idList.every(id => document.getElementById(id) !== null);

Важность строгих типов

Использование строгих типов значений ARIA важно для:

  • Поддержки screen reader и других средств доступности
  • Снижения ошибок валидации при разработке интерфейсов
  • Обеспечения совместимости со спецификацией WAI-ARIA

aria-query позволяет создавать надежные проверки и автодополнение, минимизируя риск некорректного использования ARIA-атрибутов.

Оглавление