Доступность

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

Основные принципы доступности

Доступность в контексте SortableJS строится на трёх базовых принципах:

  1. Поддержка клавиатурной навигации Элементы списка должны быть перемещаемыми не только мышью, но и с помощью клавиатуры. SortableJS предоставляет возможности для отслеживания фокуса и обработки событий клавиш, таких как Enter, Space, ArrowUp, ArrowDown.

  2. Атрибуты ARIA Для корректного восприятия перетаскиваемых элементов вспомогательными технологиями необходимо использовать ARIA-атрибуты. Ключевые атрибуты:

    • aria-grabbed — указывает, что элемент захвачен и может быть перемещён.
    • aria-dropeffect — показывает тип операции, доступной при перетаскивании (move, copy, link).
    • role="list" и role="listitem" — задают семантику контейнера и элементов списка.

  3. Визуальная индикация фокуса и перемещения Для пользователей с ограничениями зрения важна наглядная обратная связь. При выборе элемента с клавиатуры или при начале перетаскивания необходимо выделять элемент визуально с помощью классов CSS, например .sortable-chosen и .sortable-ghost.

Конфигурация доступности в SortableJS

SortableJS позволяет гибко настраивать взаимодействие с клавиатурой через опции:

  • fallbackOnBody и swapThreshold Настройки, влияющие на корректное перемещение элементов при использовании альтернативных методов взаимодействия.

  • handle и filter Позволяют ограничить перетаскивание только определёнными зонами или исключить неинтерактивные элементы из перетаскивания.

Пример конфигурации с поддержкой клавиатуры и ARIA:

const sortable = new Sortable(listElement, {
  animation: 150,
  handle: '.drag-handle',
  ghostClass: 'sortable-ghost',
  chosenClass: 'sortable-chosen',
  onStart: function (evt) {
    evt.item.setAttribute('aria-grabbed', 'true');
  },
  onEnd: function (evt) {
    evt.item.setAttribute('aria-grabbed', 'false');
  }
});

Работа с клавиатурой

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

  1. Отслеживать фокус на элементах списка.
  2. Реагировать на клавиши ArrowUp и ArrowDown для перемещения выбранного элемента.
  3. Обновлять DOM и ARIA-атрибуты после перемещения.

Пример обработчика клавиатуры:

listElement.addEventListener('keydown', (event) => {
  const item = document.activeElement;
  if (!item.classList.contains('sortable-item')) return;

  if (event.key === 'ArrowUp' && item.previousElementSibling) {
    listElement.insertBefore(item, item.previousElementSibling);
  }
  if (event.key === 'ArrowDown' && item.nextElementSibling) {
    listElement.insertBefore(item.nextElementSibling, item.nextElementSibling.nextSibling);
  }
});

Тестирование доступности

Для проверки корректной реализации доступности рекомендуется:

  • Использовать скринридеры (VoiceOver, NVDA) для проверки восприятия списка.
  • Тестировать управление только с клавиатуры.
  • Проверять правильность установки ARIA-атрибутов после всех операций перетаскивания.

Рекомендации по улучшению доступности

  • Добавлять описательные метки к элементам через aria-label или aria-labelledby.
  • Обеспечивать логичный порядок табуляции элементов списка.
  • Обновлять информацию о позиции элемента, например: «Элемент 2 из 5», используя aria-posinset и aria-setsize.
  • Минимизировать зависимость от визуальных эффектов и цвета для передачи состояния.

Доступность в SortableJS требует внимательного подхода к настройке ARIA-атрибутов, обработке событий клавиатуры и визуальной обратной связи. При правильной реализации интерфейс становится удобным для всех пользователей, сохраняя интерактивность и функциональность.

Оглавление