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.

  • Jeśli marker jest klikalny, może reagować na sygnały z klawiatury i myszy.
  • Tekst podany w opcji tytułu jest czytelny dla czytników ekranu i wyświetla się, gdy użytkownik najedzie kursorem myszy na znacznik.
  • Zwiększenie rozmiaru znaczników zmniejsza wymaganą dokładność interakcji ze znacznikami na wszystkich urządzeniach, zwłaszcza urządzeniach z ekranem dotykowym, oraz poprawia dostępność. Domyślne znaczniki są zgodne ze standardem minimalnego rozmiaru WCAG AA, ale jeśli deweloperzy chcą dostosować się do standardu rozmiaru WCAG AAA, rozmiar znacznika powinien zostać zwiększony.

Aby dowiedzieć się więcej o podstawowej personalizacji znaczników, zapoznaj się z informacjami o zmianie skali znacznika, dodawaniu tekstu tytułu itp.

Ten przykład pokazuje mapę z 5 klikalnymi znacznikami, które można ustawić w centrum uwagi.Znaczniki zawierają tekst tytułu i są ustawione na powiększenie 1, 5 x:

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.70 }, range: 13279.50, tilt: 67.44, heading: 0.01,
        mode: 'SATELLITE'
    });
    // 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({
            glyph: `${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: "beta",});</script>
  </body>
</html>
index.html

Wypróbuj fragment

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

  1. Aby wybrać pierwszy znacznik, użyj klawisza Tab. Jeśli na tej samej mapie jest więcej znaczników, możesz przełączać się między nimi za pomocą klawiszy strzałek.
  2. Jeśli znacznik jest klikalny, naciśnij klawisz Enter, aby go „kliknąć”. Jeśli punkt ma okno z informacjami, możesz je otworzyć, klikając lub naciskając klawisz Enter lub spację. Po zamknięciu okna informacji fokus wróci do powiązanego znacznika.
  3. Naciśnij ponownie klawisz Tab, aby przejść do pozostałych elementów sterujących na mapie.

Aby ułatwić dostęp:

  • Ustaw opis tekstowy znacznika za pomocą opcji Marker3DInteractiveElement.title.
  • Dodaj treści do boksu header w elementach PopoverElement.
  • Zwiększ skalę znacznika za pomocą właściwości PinElement.scale.