ARIA атрибуты

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

Роль ARIA в Drag & Drop

Draggable позволяет создавать интерфейсы с перетаскиваемыми элементами, но стандартный HTML не всегда предоставляет информацию о состоянии этих элементов. ARIA атрибуты помогают:

  • Обозначить доступность элементов для перетаскивания.
  • Сообщить о текущем состоянии элемента (например, выбран, перемещается, целевой контейнер доступен для вставки).
  • Установить логическую структуру и связь между элементами, чтобы вспомогательные технологии могли интерпретировать действия пользователя.

Основные ARIA атрибуты для Draggable

  1. aria-grabbed Используется для указания, захвачен ли элемент.

    draggableElement.setAttribute('aria-grabbed', 'true'); // элемент захвачен
draggableElement.setAttribute('aria-grabbed', 'false'); // элемент не захвачен

    Этот атрибут следует обновлять в обработчиках событий Draggable, например, drag:start и drag:stop.

  2. aria-dropeffect Определяет возможные действия при переносе элемента над контейнером. Варианты: copy, move, link, none.

    dropContainer.setAttribute('aria-dropeffect', 'move');

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

  3. role="listbox" и role="option" Если создаётся интерфейс, где элементы можно перетаскивать между списками, целесообразно использовать ARIA роли:

    <ul role="listbox">
  <li role="option">Элемент 1</li>
  <li role="option">Элемент 2</li>
</ul>

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

  4. aria-labelledby и aria-describedby Позволяют связать элемент с текстовыми описаниями или заголовками. Это важно для контейнеров и элементов, которые могут менять состояние:

    <div id="listLabel">Список товаров</div>
<ul aria-labelledby="listLabel">
  <li role="option" id="item1">Товар A</li>
</ul>

Динамическое обновление ARIA при событиях Draggable

Shopify Draggable генерирует события жизненного цикла перетаскивания: drag:start, drag:move, drag:stop, drag:over, drag:out. В этих событиях важно корректно обновлять ARIA атрибуты.

Пример: управление aria-grabbed и aria-dropeffect

const draggable = new Draggable(document.querySelectorAll('.draggable'), {
  draggable: '.item'
});

draggable.on('drag:start', (event) => {
  event.source.setAttribute('aria-grabbed', 'true');
  const dropContainers = document.querySelectorAll('.drop-zone');
  dropContainers.forEach(container => {
    container.setAttribute('aria-dropeffect', 'move');
  });
});

draggable.on('drag:stop', (event) => {
  event.source.setAttribute('aria-grabbed', 'false');
  const dropContainers = document.querySelectorAll('.drop-zone');
  dropContainers.forEach(container => {
    container.setAttribute('aria-dropeffect', 'none');
  });
});

Индикаторы состояния для вспомогательных технологий

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

  • aria-hidden="true" для временно недоступных элементов, чтобы экранные читалки игнорировали их.
  • aria-live="polite" для уведомления пользователя о перемещении элементов без необходимости вмешательства.
const liveRegion = document.createElement('div');
liveRegion.setAttribute('aria-live', 'polite');
liveRegion.className = 'sr-only';
document.body.appendChild(liveRegion);

draggable.on('drag:stop', (event) => {
  liveRegion.textContent = `Элемент ${event.source.textContent} перемещён`;
});

Локальная доступность и кастомные Drag & Drop

Для сложных интерфейсов Draggable важно синхронизировать визуальные изменения с ARIA:

  • Визуальный индикатор перемещения должен соответствовать ARIA состояниям (aria-grabbed).
  • Целевая зона должна обновлять aria-dropeffect динамически.
  • Текстовые описания для изменения порядка элементов обеспечивают поддержку для пользователей экранных читалок.

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

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

  • Каждому элементу с ролью draggable присваивать aria-grabbed.
  • Контейнерам, куда можно помещать элементы, присваивать aria-dropeffect.
  • Для списков использовать role="listbox" и role="option".
  • Использовать aria-live для уведомлений о завершении действий.
  • Проверять поведение с реальными вспомогательными технологиями: NVDA, VoiceOver, JAWS.

Такой подход к ARIA атрибутам обеспечивает корректное восприятие Draggable интерфейсов всеми пользователями, повышая доступность и соответствие стандартам WCAG.

Оглавление