Доступность (A11y)

Доступность в визуализациях Deck.gl определяется сочетанием ограничений WebGL-рендеринга и необходимых надстроек, обеспечивающих взаимодействие со вспомогательными технологиями. Поскольку основная отрисовка выполняется через <canvas>, стандартная семантика DOM недоступна, и ключевая задача заключается в создании параллельного доступного слоя представления данных и управления состоянием взаимодействия.

Canvas в WebGL не предоставляет нативной структуры элементов, поэтому доступность формируется через внешние механизмы:

  • ARIA-атрибуты на контейнере карты
  • HTML-оверлеи для интерактивных элементов
  • синхронизацию состояния между WebGL и DOM
  • генерацию текстовых описаний визуальных объектов

Контейнер Deck.gl обычно маркируется как интерактивное приложение:

<div role="application" aria-label="Интерактивная карта данных">
  <canvas></canvas>
</div>

Однако одного role="application" недостаточно: требуется явно описывать происходящие изменения, иначе экранные дикторы не получают контекст.

Подход к описательной доступности

Основной принцип заключается в том, что каждый визуальный объект должен иметь текстовую проекцию. В Deck.gl это достигается через:

  • генерацию getTooltip
  • внешние состояния hover/selection
  • структурированные описания объектов слоя

Пример логики описания:

new ScatterplotLayer({
  id: 'points',
  data,
  getPosition: d => d.coordinates,
  getRadius: d => d.size,
  getFillColor: d => d.color,
  pickable: true,
  onHover: ({object}) => {
    if (object) {
      updateA11yDescription(`${object.name}, значение ${object.value}`);
    }
  }
});

Функция updateA11yDescription обычно обновляет скрытый DOM-элемент с aria-live, обеспечивая уведомление вспомогательных технологий:

<div aria-live="polite" class="sr-only" id="deck-a11y-status"></div>

ARIA live-регионы и динамические изменения

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

  • aria-live="polite" — для обычных обновлений при наведении
  • aria-live="assertive" — для критических изменений состояния

Пример обновления:

function updateA11yDescription(text) {
  const el = document.getElementById('deck-a11y-status');
  if (el) el.textContent = text;
}

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

Фокус и клавиатурная навигация

Deck.gl по умолчанию ориентирован на мышь и pointer events, поэтому клавиатурная доступность требует дополнительной реализации.

Типовой подход:

  • создание скрытого слоя фокусируемых элементов
  • синхронизация выбора объекта с состоянием клавиатуры
  • управление фокусом через tabIndex
const selectableItems = data.map((d, i) => (
  <button
    key={i}
    tabIndex={0}
    onFo cus={() => setSelected(d)}
    aria-label={`${d.name}, значение ${d.value}`}
  />
));

Для картографических сценариев применяется концепция «логического курсора», который перемещается по данным:

  • стрелки → переход между объектами
  • Enter → выбор объекта
  • Escape → сброс выделения

Доступность взаимодействий Deck.gl слоёв

Многие слои Deck.gl (например, GeoJsonLayer, LineLayer, PolygonLayer) поддерживают picking через pickable: true. Однако результат picking — это визуальное событие, которое не несёт семантики.

Для обеспечения доступности каждый picked-объект преобразуется в структурированное описание:

onClick: ({object}) => {
  if (!object) return;

  announceToScreenReader({
    title: object.properties.name,
    details: `Площадь: ${object.properties.area} км²`
  });
};

Структура описания должна учитывать:

  • имя объекта
  • тип геометрии
  • числовые показатели
  • контекст слоя

Поддержка цветовой доступности

WebGL-визуализации часто используют цвет как основной канал информации, что критично для пользователей с нарушениями цветового восприятия.

Практики:

  • дублирование цвета формой и размером
  • использование паттернов (при необходимости через текстуры)
  • ограничение палитры с учётом контраста
  • избегание кодирования информации только цветом

Пример адаптивной логики:

getFillColor: d =>
  d.status === 'high' ? [200, 0, 0] :
  d.status === 'medium' ? [255, 165, 0] :
  [0, 180, 0]

Дополнительно добавляется текстовое описание статуса в ARIA-слой.

Работа с tooltips и альтернативным текстом

Deck.gl предоставляет getTooltip, который формирует всплывающую информацию. Для доступности он рассматривается как вторичный канал, а не основной.

const deck = new DeckGL({
  layers,
  getTooltip: ({object}) =>
    object && {
      html: `<div>${object.name}</div><div>${object.value}</div>`
    }
});

Однако для экранных дикторов HTML tooltip недоступен, поэтому параллельно создаётся текстовая версия:

  • скрытый ARIA-элемент
  • лог состояния
  • структурированные события

Reduced Motion и производительность восприятия

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

const prefersReducedMotion =
  window.matchMedia('(prefers-reduced-motion: reduce)').matches;

Применение:

  • отключение плавных переходов
  • мгновенные изменения состояния
  • сокращение частоты обновлений WebGL-слоя
transitions: prefersReducedMotion ? false : {
  getPosition: 300
}

Доступность при работе с Mapbox и слоями контекста

При использовании Deck.gl поверх Mapbox GL возникает двойной слой взаимодействия:

  • Mapbox отвечает за базовую карту
  • Deck.gl — за аналитические слои

Необходимо синхронизировать:

  • фокус карты
  • события zoom/pan
  • описания текущего viewport

ARIA-описание может включать:

  • центр карты
  • текущий масштаб
  • активный слой данных

Скрытые представления данных

Для сложных визуализаций (например, HexagonLayer, ScreenGridLayer) требуется создание альтернативного табличного представления данных.

Структура:

  • таблица значений
  • фильтры
  • сортировка
  • экспортируемые данные

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

Управление состоянием выбора

Состояние selection является ключевым для доступности. Оно должно быть единым источником истины для:

  • hover-состояний
  • клавиатурной навигации
  • ARIA-описаний
  • tooltip-логики
const [selectedObject, setSelectedObject] = useState(null);

Любое изменение selection должно отражаться:

  • в canvas (подсветка)
  • в DOM (описание)
  • в логике управления фокусом

Проблемы WebGL и обходные стратегии

Основная сложность Deck.gl заключается в том, что WebGL:

  • не предоставляет DOM-узлов
  • не поддерживает нативную семантику
  • не интегрируется напрямую с accessibility tree

Обходные подходы:

  • зеркалирование данных в DOM
  • использование aria-live регионов
  • создание интерактивных списков объектов
  • поддержка keyboard-first режима
  • синхронизация pointer events и focus events

Структурирование сложных визуализаций

При увеличении количества слоёв (multi-layer visualization) требуется иерархия доступности:

  • уровень карты
  • уровень слоя
  • уровень объекта

Каждый уровень имеет собственное текстовое представление:

  • карта: контекст региона
  • слой: тип данных
  • объект: конкретное значение

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

Оглавление