Как сделать маркеры доступными

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

• Если вы сделаете маркер кликабельным, он будет реагировать на клики и нажатия клавиш.
• Текст, добавленный с помощью свойства title, будет доступен для программ чтения с экрана и будет показываться, когда пользователь наводит указатель мыши на маркер.
• При увеличении размера маркера уменьшается точность взаимодействия с ним на разных устройствах – особенно на устройствах с сенсорным экраном, – но зато он становится более доступным. По умолчанию маркеры соответствуют стандарту минимального размера WCAG AA, однако для разработчиков, которым требуется обеспечить соответствие стандарту WCAG AAA для целевых устройств, размер маркера нужно увеличить.

В статье о базовой настройке маркеров рассказывается, как изменить масштаб маркера, добавить текст названия и т. д.

Ниже показана карта, на которой настроено пять кликабельных фокусируемых маркеров с текстом заголовка и масштабом 1, 5x.

JavaScript

async function init() {
    // Import the needed libraries.
    const [{ Marker3DInteractiveElement, PopoverElement }, { PinElement }] =
        await Promise.all([
            google.maps.importLibrary('maps3d'),
            google.maps.importLibrary('marker'),
        ]);

    const map3DElement = document.querySelector('gmp-map-3d');

    // 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: String(i + 1),
            scale: 1.5,
            glyphColor: '#FFFFFF',
        });
        const popover = new PopoverElement();

        const content = `${String(i + 1)}. ${title}`;
        const header = document.createElement('span');
        // Include the label for screen readers.
        header.ariaLabel = `This is marker ${String(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);

        map3DElement.append(interactiveMarker);
        map3DElement.append(popover);
    });

    document.body.append(map3DElement);
}

void init();
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>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map-3d
            center="34.8405,-111.7909,1322.7"
            range="13279.5"
            tilt="67.44"
            heading="0.01"
            mode="satellite"
            gesture-handling="cooperative"></gmp-map-3d>
    </body>
</html>
index.html

Как переходить между маркерами с помощью клавиатуры

1. Чтобы выбрать первый маркер, нажмите клавишу Tab. Если на карте несколько маркеров, вы можете переключаться между ними с помощью клавиш со стрелками.
2. Если маркер кликабелен, нажать на него можно с помощью клавиши Ввод. Информационное окно маркера (если оно есть) можно открыть кнопкой мыши, клавишей Ввод или клавишей Пробел. После закрытия такого окна снова выделяется связанный с ним маркер.
3. Повторное нажатие клавиши Tab вызывает переход к следующему элементу управления на карте.

Чтобы улучшить доступность:

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