Доступность

Карту и метки можно использовать без мыши. Сама карта фокусируется по клику или Tab, дальше — стрелки двигают центр, +/− зумят. Метки — отдельные фокусируемые кнопки в порядке Tab (это поведение по умолчанию, keyboard: true у Marker).

На метке Enter/Space открывает балун и переводит фокус на кнопку «Закрыть» внутри него (сам балун — диалог с role="dialog" для скринридеров), Esc закрывает балун и возвращает фокус на метку, с которой он был открыт. Текст метки для скринридера берётся из title (→ aria-label).

Ничего специально включать не нужно — это поведение по умолчанию у Marker и Popup, в примере только три метки с title и балуном.

Код

Код ниже — рабочий, с боевыми адресами: вставьте как есть на свою страницу.

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>EvaMaps SDK — доступность</title>
    <link rel="stylesheet" href="https://evamaps.ru/sdk/1/evamaps.css" />
    <style>
      html,
      body {
        margin: 0;
        font-family: system-ui, -apple-system, sans-serif;
      }
      #map {
        width: 100%;
        height: 520px;
      }
      p {
        margin: 10px 16px;
        color: #555;
        font-size: 13px;
      }
      kbd {
        padding: 1px 5px;
        border: 1px solid #ccc;
        border-radius: 3px;
        background: #f4f4f4;
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script src="https://evamaps.ru/sdk/1/evamaps.js"></script>
    <script>
      var map = EvaMaps.create('map', {
        center: [37.617, 55.754],
        zoom: 14,
        theme: 'light',
      });

      var points = [
        { ll: [37.605, 55.75], title: 'Метка А', text: 'Балун метки А: сюда попадает фокус после Enter.' },
        { ll: [37.617, 55.754], title: 'Метка Б', text: 'Балун метки Б.' },
        { ll: [37.629, 55.758], title: 'Метка В', text: 'Балун метки В.' },
      ];

      points.forEach(function (p) {
        // title -> aria-label метки-кнопки (docs/api/reference.md §5).
        EvaMaps.marker(p.ll, { title: p.title })
          .setPopup(EvaMaps.popup().setText(p.text))
          .addTo(map);
      });
    </script>
  </body>
</html>

← Все примеры