ARIA-атрибуты

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

Gridstack.js поддерживает несколько ключевых ARIA-атрибутов, влияющих на восприятие и управление drag-and-drop интерфейсом, а также на понимание расположения и размеров виджетов сетки.

Основные ARIA-атрибуты в Gridstack.js

aria-grabbed

  • Назначение: Указывает, захвачен ли элемент для перетаскивания.
  • Возможные значения: "true" — элемент перетаскивается, "false" — элемент не перетаскивается.
  • Применение: В момент начала перетаскивания Gridstack автоматически обновляет этот атрибут у виджета, что позволяет экранным читалкам сообщать пользователю состояние элемента.

Пример использования:

<div class="grid-stack-item" aria-grabbed="false">
  <div class="grid-stack-item-content">Виджет</div>
</div>

При захвате виджета через drag-and-drop атрибут обновляется на aria-grabbed="true".

aria-dropeffect

  • Назначение: Указывает на допустимые действия при переносе элемента.
  • Возможные значения: "move", "copy", "link", "none".
  • Применение: Обеспечивает обратную связь о возможностях взаимодействия с контейнерами сетки.

Пример:

<div class="grid-stack" aria-dropeffect="move">
  <!-- виджеты -->
</div>

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

aria-describedby и aria-labelledby

  • Назначение: Связывает виджет с текстовым описанием или заголовком, позволяя пользователям вспомогательных технологий понять содержимое.
  • Использование в Gridstack: Полезно при динамическом создании виджетов, чтобы добавить описание или заголовок для экранных читалок.

Пример:

<div class="grid-stack-item" aria-labelledby="widget1-title" aria-describedby="widget1-desc">
  <div id="widget1-title">Заголовок виджета</div>
  <div id="widget1-desc">Описание виджета, поясняющее его содержимое</div>
</div>

Динамическое управление ARIA-атрибутами

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

  • dragstart — присвоение aria-grabbed="true".
  • dragstop — сброс aria-grabbed="false".
  • change — обновление атрибутов описания и позиции для новых элементов сетки.

Пример:

grid.on('dragstart', function(event, ui) {
  ui.el.setAttribute('aria-grabbed', 'true');
});

grid.on('dragstop', function(event, ui) {
  ui.el.setAttribute('aria-grabbed', 'false');
});

Рекомендации по использованию ARIA в Gridstack

  1. Поддержка виджетов с клавиатуры: В сочетании с ARIA-атрибутами следует обеспечить навигацию по сетке с клавиатуры, чтобы пользователи могли перемещать и выбирать элементы без мыши.
  2. Обновление атрибутов при динамических изменениях: При добавлении или удалении виджетов необходимо синхронизировать aria-describedby и aria-labelledby.
  3. Информативные описания: Каждому виджету желательно добавить краткое описание через aria-describedby, чтобы пользователи понимали назначение блока.
  4. Контейнер сетки: Обязательно указывать aria-dropeffect для родительской сетки, чтобы обозначить допустимые действия с элементами.

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

<div class="grid-stack" aria-dropeffect="move">
  <div class="grid-stack-item" aria-grabbed="false" aria-labelledby="widget1-title" aria-describedby="widget1-desc">
    <div class="grid-stack-item-content">
      <h3 id="widget1-title">График продаж</h3>
      <p id="widget1-desc">Отображает динамику продаж за месяц</p>
    </div>
  </div>
</div>

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

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

Оглавление