Ułatwianie dostępu do znaczników

Możesz zwiększyć dostępność znaczników, włączając obsługę zdarzeń kliknięcia, dodając tekst opisowy dla czytników ekranu i dostosowując skalę znacznika.

  • Gdy znacznik jest klikalny, może reagować na dane wejściowe z klawiatury i myszy.
  • Tekst określony w opcji title jest odczytywany przez czytniki ekranu i wyświetla się, gdy użytkownik przytrzyma wskaźnik myszy nad znacznikiem.
  • Zwiększenie rozmiaru znaczników zmniejsza precyzję wymaganą do interakcji z nimi na wszystkich urządzeniach, zwłaszcza na urządzeniach z ekranem dotykowym, i poprawia dostępność. Domyślne znaczniki spełniają minimalny standard rozmiaru WCAG AA size standard, ale deweloperzy, którzy chcą spełnić standard rozmiaru docelowego WCAG AAA target size, powinni zwiększyć rozmiar znacznika.

Aby dowiedzieć się, jak zmienić skalę znacznika, dodać tekst tytułu i inne elementy, zapoznaj się z podstawową personalizacją znacznika.

Poniższy przykład przedstawia mapę z 5 klikalnymi znacznikami, na których można się skupić, które zawierają tekst tytułu i zostały ustawione na skalę 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();

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;
}

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>

Aby poruszać się po znacznikach za pomocą klawiatury:

  1. Użyj klawisza Tab, aby skupić się na pierwszym znaczniku. Jeśli na tej samej mapie jest kilka znaczników, użyj klawiszy strzałek, aby przełączać się między nimi.
  2. Jeśli znacznik jest klikalny, naciśnij Enter, aby „kliknąć”. Jeśli znacznik ma okno informacyjne, możesz je otworzyć, klikając lub naciskając Enter albo spację. Gdy okno informacyjne zostanie zamknięte, fokus wróci do powiązanego znacznika.
  3. Naciśnij ponownie Tab, aby kontynuować poruszanie się po pozostałych elementach sterujących mapy.

Aby zwiększyć dostępność:

  • Ustaw tekst opisowy znacznika za pomocą opcji Marker3DInteractiveElement.title.
  • Dodaj treść do slotu header elementu PopoverElement.
  • Zwiększ skalę znacznika za pomocą właściwości PinElement.scale.