Announcement для accessibility

Библиотека Shopify Draggable предоставляет мощные инструменты для реализации drag-and-drop интерфейсов. Одним из ключевых аспектов современных интерфейсов является доступность (accessibility, a11y). В этом контексте объект Announcement играет важную роль, позволяя информировать пользователей с особыми потребностями о событиях drag-and-drop через технологии экранного чтения.

Назначение Announcement

Announcement — это механизм, который позволяет передавать сообщения для скринридеров. Он применяется в ситуациях, когда происходят изменения, которые визуально очевидны, но недоступны для пользователей, полагающихся на аудиоинтерфейсы. Например:

  • Перемещение элемента в новый контейнер
  • Изменение порядка элементов
  • Отмена или завершение операции drag-and-drop

Использование Announcement повышает соответствие стандартам WCAG и обеспечивает полноценную интерактивность для всех пользователей.

Создание и подключение Announcement

В Draggable для работы с Announcement используется plugin Accessibility. При его инициализации можно передать объект с функцией announcement:

import { Draggable, Plugins } from '@shopify/draggable';

const container = document.querySelector('.container');

const draggable = new Draggable(container, {
  draggable: '.item',
  plugins: [Plugins.Accessibility],
  accessibility: {
    announcement: (type, element, container) => {
      switch(type) {
        case 'drag:start':
          return `Начато перемещение элемента ${element.textContent}`;
        case 'drag:stop':
          return `Элемент ${element.textContent} перемещён`;
        case 'drag:over':
          return `Элемент находится над контейнером ${container.id}`;
        default:
          return '';
      }
    }
  }
});

draggable.on('drag:start', (event) => {
  console.log('Drag started', event);
});

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

  • type — тип события (drag:start, drag:over, drag:stop, mirror:created и др.)
  • element — HTML-элемент, над которым происходит действие
  • container — контейнер, с которым взаимодействует элемент
  • Возвращаемое строковое значение передается в aria-live область для скринридеров

Поддерживаемые события Announcement

Draggable предоставляет следующие события для использования в Announcement:

  • drag:start — начало перетаскивания
  • drag:move — движение элемента во время drag
  • drag:over — когда перетаскиваемый элемент находится над новым контейнером
  • drag:stop — завершение операции
  • mirror:created — создание зеркального элемента
  • mirror:destroy — удаление зеркала
  • sortable:sorted — завершение сортировки

Каждое из этих событий можно использовать для генерации соответствующего сообщения, обеспечивая динамическое обновление информации в aria-live для пользователей со скринридерами.

Использование aria-live для Announcement

Для корректной работы Announcement необходимо создать скрытую область с атрибутом aria-live. Обычно Draggable автоматически создает такую область через плагин Accessibility:

<div id="draggable-announcement" aria-live="assertive" style="position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;"></div>
  • assertive — мгновенное озвучивание сообщений
  • polite — сообщения произносятся после текущей речи
  • Использование скрытого элемента предотвращает визуальное вмешательство, но обеспечивает доступность информации для скринридеров

Настройка кастомных сообщений

Announcement можно гибко настраивать, формируя сообщения в зависимости от состояния приложения. Примеры:

announcement: (type, element, container) => {
  if (type === 'drag:over') {
    return `Элемент ${element.textContent} сейчас находится в контейнере ${container.dataset.name}`;
  }
  if (type === 'drag:stop') {
    return `Элемент ${element.textContent} успешно перемещен в позицию ${Array.from(container.children).indexOf(element) + 1}`;
  }
}

Особенности:

  • Использование атрибутов data-* позволяет добавлять контекст
  • Индексация позиции элементов помогает пользователю понимать порядок элементов
  • Сообщения должны быть краткими и информативными, чтобы не перегружать скринридер

Интеграция с Sortable и Multi-Container

Draggable поддерживает сложные сценарии:

  • Sortable — изменение порядка элементов в контейнере
  • Swappable — обмен элементов между контейнерами
  • Multi-Container — перемещение элементов между несколькими контейнерами

Для каждого сценария Announcement можно реализовать отдельные сообщения:

announcement: (type, element, container, sourceContainer) => {
  if(type === 'drag:over' && sourceContainer) {
    return `Элемент ${element.textContent} перемещается из ${sourceContainer.dataset.name} в ${container.dataset.name}`;
  }
}

Такое детализированное сообщение помогает пользователю понять, откуда и куда перемещается элемент.

Рекомендации по доступности

  • Использовать короткие, но информативные фразы
  • Сохранять последовательность сообщений, чтобы скринридер мог правильно воспроизвести действия
  • Тестировать с различными скринридерами (NVDA, JAWS, VoiceOver)
  • Обновлять aria-live только при значимых событиях, чтобы избежать шумовых сообщений

Вывод

Объект Announcement в Shopify Draggable обеспечивает критически важную функциональность для доступности drag-and-drop интерфейсов. Его использование гарантирует, что динамические изменения будут доступны пользователям с ограниченными возможностями, повышая инклюзивность и соответствие стандартам WCAG. Гибкая настройка и интеграция с событиями Draggable позволяет создавать интерфейсы, которые полностью информируют пользователя о действиях с элементами.

Оглавление