ARIA атрибуты

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

ARIA (Accessible Rich Internet Applications) обеспечивает семантическое описание элементов интерфейса, которые иначе остаются «невидимыми» для скринридеров. В контексте карт это особенно важно, поскольку значительная часть информации передаётся визуально: маркеры, маршруты, полигоны, всплывающие окна и слои.

Семантическая структура контейнера карты

Основной контейнер карты, создаваемый через HERE Maps API, обычно представляет собой <div> элемент, который по умолчанию не имеет семантики. Для корректной работы вспомогательных технологий ему необходимо задать роль и описание.

Ключевые ARIA-атрибуты для контейнера карты:

  • role="application" — указывает, что внутри находится сложное интерактивное приложение
  • aria-label — задаёт текстовое описание карты
  • aria-roledescription — уточняет назначение интерфейса
  • tabindex="0" — делает контейнер доступным для фокуса с клавиатуры

Пример базовой разметки:

<div id="mapContainer"
     role="application"
     aria-label="Интерактивная карта"
     aria-roledescription="карта с навигацией и объектами"
     tabindex="0"></div>

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

ARIA-атрибуты для элементов управления картой

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

Кнопки масштабирования

<button aria-label="Увеличить масштаб карты">+</button>
<button aria-label="Уменьшить масштаб карты">−</button>

Дополнительно используются:

  • aria-pressed — для переключаемых состояний
  • aria-disabled — для неактивных элементов

Пример:

<button aria-label="Увеличить масштаб"
        aria-disabled="false">+</button>

Маркеры и их семантическое описание

Маркеры в HERE Maps API создаются как объекты H.map.Marker, но для доступности требуется сопоставление с DOM-описанием или ARIA-узлом.

Каждый маркер должен иметь:

  • текстовое описание через aria-label
  • роль img или button в зависимости от интерактивности
  • возможность фокусировки

Пример интеграции:

<div role="button"
     tabindex="0"
     aria-label="Метка: ресторан Центральный парк"></div>

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

Информационные окна и aria-live области

Информационные окна (InfoBubble в HERE Maps API) отображают динамический контент. Для корректного озвучивания используется aria-live.

Типичные варианты:

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

Пример контейнера всплывающего окна:

<div aria-live="polite"
     aria-atomic="true"
     role="dialog"
     aria-label="Информация об объекте">
</div>

Использование role="dialog" помогает скринридерам интерпретировать окно как модальное или информационное.

Динамическое обновление состояния карты

HERE Maps API позволяет изменять центр карты, масштаб и слои без перезагрузки страницы. Эти изменения должны отражаться в ARIA-атрибутах.

Примеры обновляемых свойств:

  • текущий масштаб (aria-valuenow)
  • диапазон масштабирования (aria-valuemin, aria-valuemax)
  • текущий центр карты (через aria-label)

Пример ползунка масштаба:

<input type="range"
       min="1"
       max="20"
       value="10"
       aria-label="Масштаб карты"
       aria-valuemin="1"
       aria-valuemax="20"
       aria-valuenow="10">

Навигация с клавиатуры и ARIA роли

Карта должна поддерживать навигацию без мыши. ARIA здесь играет вспомогательную роль, дополняя обработку событий клавиатуры.

Основные принципы:

  • Tab — переход между элементами управления
  • Arrow keys — перемещение по карте (реализуется через JS)
  • Enter / Space — активация маркеров

Для контейнера карты часто задаётся:

<div role="application"
     tabindex="0"
     aria-keyshortcuts="ArrowUp ArrowDown ArrowLeft ArrowRight">
</div>

aria-keyshortcuts документирует доступные комбинации, хотя фактическая логика реализуется в JavaScript через обработчики событий keydown.

Слои карты и их доступность

HERE Maps API поддерживает различные слои: транспорт, трафик, спутник, погодные данные. Переключение слоёв должно быть отражено в ARIA-состояниях.

Пример кнопки переключения слоя:

<button aria-pressed="false"
        aria-label="Показать слой трафика">
    Трафик
</button>

При активации:

  • aria-pressed становится true
  • aria-label может обновляться для отражения состояния

Геообъекты и списки результатов

При работе с геокодированием и поиском HERE Maps API формирует списки объектов. Эти списки должны быть представлены как структурированные элементы списка:

<ul role="listbox" aria-label="Результаты поиска">
    <li role="option" tabindex="0" aria-selected="false">
        Улица Абая, 10
    </li>
</ul>

Используемые ARIA-атрибуты:

  • role="listbox" — контейнер списка
  • role="option" — элемент выбора
  • aria-selected — текущее состояние выбора

Синхронизация ARIA с состоянием карты

Одной из ключевых проблем является рассинхронизация визуального состояния карты и ARIA-описаний. При изменении состояния карты через HERE Maps API необходимо обновлять:

  • центр и масштаб
  • активные маркеры
  • выбранные слои
  • открытые информационные окна

Пример обновления через Jav * aScript:

map.addEventListener('mapviewchangeend', function () {
    const zoom = map.getZoom();
    const container = document.getElementById('mapContainer');

    container.setAttribute(
        'aria-label',
        'Карта. Текущий масштаб: ' + zoom
    );
});

ARIA и кастомные оверлеи HERE Maps API

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

  • role="tooltip" — подсказки
  • role="dialog" — модальные окна
  • role="region" — выделенные области интерфейса

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

<div role="tooltip"
     aria-hidden="false"
     aria-label="Дополнительная информация">
</div>

Принципы согласованности ARIA в картографических интерфейсах

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

Основные принципы:

  • постоянное обновление aria-* при изменении состояния карты
  • использование стандартных ролей вместо произвольных
  • минимизация избыточных атрибутов
  • синхронизация DOM и состояния API карты
Оглавление