Альтернативный текст для карт

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

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

Семантическое описание объектов карты

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

В контексте HERE Maps API это касается следующих элементов:

  • маркеры (точки интереса, POI)
  • пользовательские слои (DataLayer)
  • полигоны и маршруты
  • инфо-блоки (InfoBubble)
  • DOM-маркеры (H.map.DomMarker)

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

Пример базового подхода к описанию маркера:

const marker = new H.map.Marker(
  { lat: 52.5200, lng: 13.4050 },
  {
    data: {
      altText: "Маркер: Берлин, центр города. Туристическая зона и транспортный узел."
    }
  }
);

map.addObject(marker);

Поле data.altText не является строго стандартизированным API-свойством, но используется как паттерн хранения семантики, доступной для обработки логикой доступности приложения.

Альтернативный текст в DOM-маркерах

DOM-маркер в HERE Maps API позволяет использовать полноценные HTML-элементы, что делает его основным инструментом для внедрения доступности.

При использовании HERE Maps API DOM-слой часто применяется для сложных визуальных объектов, где требуется богатая семантика.

const domIcon = document.createElement('div');
domIcon.className = 'custom-marker';
domIcon.setAttribute('role', 'img');
domIcon.setAttribute('aria-label', 'Ресторан: центр города. Оценка высокая, рядом станция метро.');

domIcon.innerHTML = `
  <div class="pin"></div>
  <div class="label">R</div>
`;

const domMarker = new H.map.DomMarker(
  { lat: 52.517, lng: 13.3889 },
  {
    icon: new H.map.DomIcon(domIcon)
  }
);

map.addObject(domMarker);

Использование aria-label превращает графический элемент в доступную сущность, а role="img" задаёт семантический тип.

Связь альтернативного текста с геоданными

Альтернативный текст в картографии не является статическим описанием. Он формируется на основе геоданных и может изменяться в зависимости от масштаба карты, фильтров и состояния слоя.

Пример динамической генерации описания:

function createAltText(feature) {
  return `Объект: ${feature.name}. Тип: ${feature.type}. ` +
         `Координаты: ${feature.geometry.lat}, ${feature.geometry.lng}.`;
}

const feature = {
  name: "Центральный вокзал",
  type: "transport hub",
  geometry: { lat: 52.525, lng: 13.369 }
};

const marker = new H.map.Marker(
  feature.geometry,
  {
    data: {
      altText: createAltText(feature)
    }
  }
);

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

Доступность слоёв и групп объектов

При работе с группами объектов (например, H.map.Group) альтернативный текст должен учитывать агрегированное представление.

const group = new H.map.Group();

group.addEventListener('tap', function (evt) {
  const objects = group.getObjects();

  const summary = `Группа объектов. Количество: ${objects.length}. ` +
                  `Основной тип: инфраструктура города.`;

  // гипотетическая интеграция с системой доступности
  announceToScreenReader(summary);
});

map.addObject(group);

В таких случаях текст описывает не отдельный элемент, а структуру слоя.

Инфо-окна и текстовая эквивалентность

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

const bubble = new H.ui.InfoBubble(
  { lat: 52.516, lng: 13.377 },
  {
    content: `
      <div>
        <h3>Музей</h3>
        <p>Исторический объект. Открыт ежедневно.</p>
      </div>
    `
  }
);

// текстовая репрезентация для доступности
bubble.setData({
  altText: "Музей. Исторический объект. Работает ежедневно. Расположен в центре города."
});

Здесь визуальная и текстовая части разделяются, но остаются синхронизированными.

Роль ARIA в картографических интерфейсах

ARIA-атрибуты становятся основным механизмом передачи семантики в DOM-слое карты. При использовании HERE Maps API они особенно важны для кастомных элементов управления.

Ключевые паттерны:

  • aria-label — описание объекта
  • aria-describedby — расширенная информация
  • role="application" — контейнер карты
  • role="button" — интерактивные маркеры

Пример контейнера карты:

<div id="mapContainer"
     role="application"
     aria-label="Интерактивная карта города с точками интереса">
</div>

Альтернативный текст в маршрутах и линиях

Линии маршрутов и полигоны часто являются наименее очевидными объектами с точки зрения доступности.

const lineString = new H.geo.LineString();

lineString.pushPoint({ lat: 52.5, lng: 13.4 });
lineString.pushPoint({ lat: 52.51, lng: 13.41 });

const routeLine = new H.map.Polyline(lineString, {
  style: { strokeColor: 'blue', lineWidth: 4 },
  data: {
    altText: "Маршрут движения: от центральной площади до северного района. Длина около 2 километров."
  }
});

map.addObject(routeLine);

Описание маршрута должно включать направление, назначение и приблизительную протяжённость.

Масштабирование и контекст альтернативного текста

Одной из особенностей картографических систем является зависимость семантики от масштаба.

На высоком уровне масштабирования один и тот же объект может описываться как:

  • город
  • транспортный узел
  • набор районов

Пример адаптивного описания:

function getScaleDependentAltText(feature, zoom) {
  if (zoom > 14) {
    return `Улица ${feature.name}. Жилая застройка, локальная инфраструктура.`;
  }

  if (zoom > 10) {
    return `Район ${feature.name}. Городская зона с плотной застройкой.`;
  }

  return `Город ${feature.name}. Крупный населённый пункт.`;
}

Такой подход позволяет сохранять релевантность описаний при изменении уровня детализации.

Интеграция с событиями карты

Альтернативный текст может обновляться в ответ на события: наведение, клик, изменение слоя.

map.addEventListener('pointermove', function (evt) {
  const target = evt.target;

  if (target && target.getData) {
    const data = target.getData();

    if (data && data.altText) {
      updateScreenReaderRegion(data.altText);
    }
  }
});

Событийная модель HERE Maps API позволяет строить реактивную систему доступности, где текстовая информация следует за пользовательским взаимодействием.

Текстовая репрезентация сложных объектов

Составные объекты, такие как кластеры точек интереса, требуют агрегации данных:

function clusterAltText(cluster) {
  const size = cluster.getData().getEntries().length;

  return `Кластер объектов. Содержит ${size} точек интереса. ` +
         `Приближение карты позволит раскрыть детали.`;
}

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

Разделение визуального и семантического слоёв

В архитектуре приложений на базе HERE Maps API важно разделять:

  • визуальный слой (WebGL, Canvas, DOM)
  • семантический слой (altText, ARIA, описания)
  • логический слой (данные геообъектов)

Это разделение позволяет независимо масштабировать отображение и доступность без дублирования бизнес-логики.

const geoObject = {
  geometry: { lat: 52.52, lng: 13.40 },
  properties: {
    name: "Офисный центр",
    type: "building"
  }
};

const accessibility = {
  altText: `Здание: ${geoObject.properties.name}. Тип: ${geoObject.properties.type}.`
};

Такая структура упрощает интеграцию с системами экранного доступа и голосового вывода.

Оглавление