ARIA атрибуты

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

Основные ARIA-атрибуты для интерактивных элементов

1. aria-grabbed Используется для элементов, которые можно перетаскивать. Атрибут принимает значения true или false:

interact('.draggable')
  .draggable({
    listeners: {
      start (event) {
        event.target.setAttribute('aria-grabbed', 'true');
      },
      end (event) {
        event.target.setAttribute('aria-grabbed', 'false');
      }
    }
  });
  • true — элемент в данный момент перетаскивается.
  • false — элемент не захвачен для перетаскивания.

Это помогает экранным читалкам сообщать пользователю, что объект находится в процессе перемещения.

2. aria-dropeffect Определяет возможные действия при переносе объекта на область назначения. Значения могут быть: copy, move, link, execute, popup, none.

interact('.dropzone')
  .dropzone({
    listeners: {
      dragenter (event) {
        event.target.setAttribute('aria-dropeffect', 'move');
      },
      dragleave (event) {
        event.target.setAttribute('aria-dropeffect', 'none');
      }
    }
  });
  • move — элемент будет перемещён.
  • copy — элемент будет скопирован.
  • none — перетаскивание недоступно.

Эта практика делает зоны сброса интерактивными и понятными для пользователей с ограниченными возможностями.

3. aria-labelledby и aria-describedby Позволяют связать интерактивный элемент с текстовым описанием или заголовком, что особенно важно для сложных интерфейсов с множеством перетаскиваемых объектов:

<div id="drag1-label">Элемент 1</div>
<div id="drag1-desc">Можно перетаскивать в любую из зон</div>
<div class="draggable" id="drag1" 
     aria-labelledby="drag1-label" 
     aria-describedby="drag1-desc"></div>

Interact.js не автоматически управляет этими атрибутами, но правильная разметка повышает доступность элементов.

Динамическое управление ARIA при взаимодействии

Interact.js позволяет реагировать на события перетаскивания, масштабирования и жестов, изменяя ARIA-атрибуты в реальном времени:

interact('.resizable')
  .resizable({
    edges: { left: true, right: true, bottom: true, top: true },
    listeners: {
      move (event) {
        const { width, height } = event.rect;
        event.target.setAttribute('aria-valuenow', width);
        event.target.setAttribute('aria-valuemax', 500);
        event.target.setAttribute('aria-valuemin', 100);
      }
    }
  });
  • aria-valuenow — текущее значение (например, ширина элемента).
  • aria-valuemin / aria-valuemax — минимальное и максимальное значения, позволяющие экранным читалкам корректно интерпретировать диапазон.

Для элементов с изменяемыми размерами или положением это критично для доступности.

Практика использования role вместе с ARIA

Назначение корректного role помогает вспомогательным технологиям идентифицировать интерактивный элемент:

document.querySelectorAll('.draggable').forEach(el => {
  el.setAttribute('role', 'option'); // или 'button', если элемент активный
});
  • role=“option” — подходит для выбора элементов в списках.
  • role=“button” — если элемент инициирует действие при клике или нажатии.
  • role=“slider” — для элементов с изменяемым значением (например, размер или позиция).

Совмещение role с ARIA-атрибутами обеспечивает полную семантику для пользователей, использующих экранные читалки.

Рекомендации по интеграции ARIA в Interact.js

  • Каждый перетаскиваемый элемент должен иметь aria-grabbed и корректный role.
  • Зоны сброса — aria-dropeffect с динамическим обновлением при наведении.
  • Для элементов с изменяемыми значениями — aria-valuenow, aria-valuemin, aria-valuemax.
  • Добавление aria-labelledby и aria-describedby улучшает контекст и информативность.
  • Следует отслеживать события Interact.js (dragstart, dragmove, dragend, resizemove) для динамического изменения атрибутов.

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

Оглавление