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 sygnał myszy.
  • Tekst określony w opcji title jest odczytywany przez czytniki ekranu i wyświetla się, gdy użytkownik najedzie wskaźnikiem myszy na znacznik.
  • 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() {
    const [
        { Map3DElement, Marker3DInteractiveElement, PopoverElement },
        { PinElement },
    ] = await Promise.all([
        google.maps.importLibrary('maps3d'),
        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);
}

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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
            });
        </script>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

Wypróbuj przykład

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 go „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ć przechodzenie przez pozostałe elementy sterujące 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.