Сделайте маркеры доступными

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

  • Если маркер является кликабельным, он может реагировать на ввод с клавиатуры и мыши.
  • Текст, указанный в параметре заголовка, читаем программами чтения с экрана и будет отображаться при наведении указателя мыши на маркер.
  • Increasing the size of markers reduces the precision required to interact with it across all devices — especially touchscreen devices — and improves accessibility. Default markers meet the WCAG AA minimum size standard but for developers aiming to comply with the WCAG AAA target size standard the marker size should be increased.

В разделе «Основные настройки маркеров» вы узнаете, как изменить масштаб маркера, добавить заголовок и многое другое.

В следующем примере показана карта с пятью кликабельными, фокусируемыми маркерами, содержащими заголовок и масштаб 1,5x:

JavaScript 

async function initMap() {
    const { Map3DElement, Marker3DInteractiveElement, PopoverElement } = await google.maps.importLibrary('maps3d');
    const { PinElement } = await google.maps.importLibrary('marker');
    const map = new Map3DElement({
        center: { lat: 34.8405, lng: -111.7909, altitude: 1322.7 },
        range: 13279.5,
        tilt: 67.44,
        heading: 0.01,
        mode: 'SATELLITE',
        gestureHandling: 'COOPERATIVE',
    });
    // Set LatLng and title text for the markers. The first marker (Boynton Pass)
    // receives the initial focus when tab is pressed. Use arrow keys to move
    // between markers; press tab again to cycle through the map controls.
    const tourStops = [
        {
            position: { lat: 34.8791806, lng: -111.8265049 },
            title: 'Boynton Pass',
        },
        {
            position: { lat: 34.8559195, lng: -111.7988186 },
            title: 'Airport Mesa',
        },
        {
            position: { lat: 34.832149, lng: -111.7695277 },
            title: 'Chapel of the Holy Cross',
        },
        {
            position: { lat: 34.823736, lng: -111.8001857 },
            title: 'Red Rock Crossing',
        },
        {
            position: { lat: 34.800326, lng: -111.7665047 },
            title: 'Bell Rock',
        },
    ];
    tourStops.forEach(({ position, title }, i) => {
        const pin = new PinElement({
            glyphText: `${i + 1}`,
            scale: 1.5,
            glyphColor: '#FFFFFF',
        });
        const popover = new PopoverElement();
        const content = `${i + 1}. ${title}`;
        const header = document.createElement('span');
        // Include the label for screen readers.
        header.ariaLabel = `This is marker ${i + 1}. ${title}`;
        header.slot = 'header';
        popover.append(header);
        popover.append(content);
        const interactiveMarker = new Marker3DInteractiveElement({
            // Include a title, used for accessibility text for use by screen readers.
            title,
            position,
            gmpPopoverTargetElement: popover,
        });
        interactiveMarker.append(pin);
        map.append(interactiveMarker);
        map.append(popover);
    });
    document.body.append(map);
}
initMap();
index.js

CSS 

/* * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
html,
map {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
style.css

HTML 

<html>
    <head>
        <title>Map</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
    </head>
    <body>
        <div id="map"></div>

        <!-- prettier-ignore -->
        <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly", internalUsageAttributionIds: "gmp_git_jsapisamples_v1_3d-accessibility" });</script>
    </body>
</html>
index.html

Попробуйте образец

Для перемещения по маркерам с помощью клавиатуры:

  1. Используйте клавишу Tab, чтобы сфокусироваться на первом маркере; если на карте несколько маркеров, используйте клавиши со стрелками для переключения между ними.
  2. Если маркер кликабельный, нажмите клавишу Enter, чтобы "щёлкнуть". Если у маркера есть информационное окно, вы можете открыть его щелчком мыши, нажатием клавиши Enter или пробела. Когда информационное окно закроется, фокус вернется к соответствующему маркеру.
  3. Нажмите клавишу Tab еще раз, чтобы продолжить перемещение по остальным элементам управления картой.

Для повышения доступности:

  • Задайте описательный текст для маркера, используя параметр Marker3DInteractiveElement.title .
  • Добавьте контент в header слот элемента PopoverElement .
  • Увеличьте масштаб маркера, используя свойство PinElement.scale .