ARIA атрибуты

Popper.js — это мощная библиотека для управления позиционированием всплывающих элементов, таких как тултипы, поповеры, дропдауны. Важно, чтобы такие элементы были доступны для пользователей с ограниченными возможностями, и для этого используются ARIA (Accessible Rich Internet Applications) атрибуты. В Popper.js поддержка ARIA осуществляется через настройку и синхронизацию с целевыми элементами и самим поппером.

Основные ARIA атрибуты

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

    <button id="btn" aria-describedby="tooltip">Кнопка</button>
<div id="tooltip" role="tooltip">Это подсказка</div>

    В Popper.js достаточно передать ссылку на элемент-поппер, чтобы aria-describedby корректно указывал на него.

  2. role="tooltip" Указывает, что элемент является тултипом. ARIA role помогает скринридерам распознавать тип элемента. Без этого роли подсказки будут игнорироваться. Popper.js автоматически не добавляет role, но часто используется вместе с кастомными модификаторами:

    const popperInstance = Popper.createPopper(reference, popper, {
  modifiers: [{
    name: 'applyAria',
    enabled: true,
    fn({ state }) {
      state.elements.popper.setAttribute('role', 'tooltip');
      state.elements.reference.setAttribute('aria-describedby', state.elements.popper.id);
    }
  }]
});

  3. aria-hidden Управляет видимостью элемента для скринридеров. Когда тултип скрыт, его нужно пометить aria-hidden="true". При показе — менять на false:

    function showTooltip() {
  tooltip.setAttribute('aria-hidden', 'false');
  popperInstance.update();
}

function hideTooltip() {
  tooltip.setAttribute('aria-hidden', 'true');
}

Интеграция ARIA с модификаторами

Popper.js использует модификаторы, которые позволяют вмешиваться в процесс позиционирования и взаимодействия. Для ARIA часто создают кастомный модификатор ariaAttributes:

const ariaModifier = {
  name: 'ariaAttributes',
  enabled: true,
  phase: 'write',
  fn({ state }) {
    const { reference, popper } = state.elements;
    popper.setAttribute('role', 'tooltip');
    reference.setAttribute('aria-describedby', popper.id);
  }
};

const popperInstance = Popper.createPopper(reference, popper, {
  modifiers: [ariaModifier]
});

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

  • phase: 'write' — модификатор срабатывает после расчета позиции и может изменять DOM.
  • state.elements.popper.id — важно, чтобы поппер имел уникальный ID для связи с aria-describedby.

Управление доступностью через состояние видимости

Чтобы тултип оставался доступным, даже когда его нет на экране, используют динамическое управление ARIA:

  • Показ тултипа:

    tooltip.setAttribute('aria-hidden', 'false');

  • Скрытие тултипа:

    tooltip.setAttribute('aria-hidden', 'true');

Иногда комбинируют с классами для анимации или с display: none, но следует помнить, что display: none полностью скрывает элемент от скринридеров, поэтому атрибут aria-hidden предпочтительнее для контроля доступности.

Особенности для сложных интерфейсов

Для дропдаунов и поповеров с несколькими уровнями элементов ARIA расширяется:

  1. aria-haspopup — указывает на наличие всплывающего меню.

    <button aria-haspopup="true" aria-expanded="false">Меню</button>

  2. aria-expanded — отражает состояние открыто/закрыто.

    button.setAttribute('aria-expanded', 'true'); // при открытии
button.setAttribute('aria-expanded', 'false'); // при закрытии

  3. role="menu" и role="menuitem" — для элементов внутри меню.

    <ul role="menu">
  <li role="menuitem">Пункт 1</li>
  <li role="menuitem">Пункт 2</li>
</ul>

Popper.js может быть использован для управления позиционированием этих элементов, а ARIA атрибуты обеспечивают их корректное восприятие скринридерами.

Рекомендации по ARIA в Popper.js

  • Всегда назначать уникальный id элементу поппера.
  • Поддерживать синхронизацию aria-describedby и role="tooltip" для тултипов.
  • Управлять aria-hidden динамически при показе/скрытии.
  • Для меню использовать aria-haspopup, aria-expanded и правильные роли элементов.
  • Кастомные модификаторы — оптимальный способ автоматизировать добавление ARIA атрибутов в Popper.js без вмешательства в каждый DOM элемент вручную.

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

Оглавление