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 znacznik można kliknąć, może on reagować na dane wejściowe z klawiatury i myszy.
  • Tekst określony w opcji tytułu jest odczytywany przez czytniki ekranu i wyświetlany, 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, ale w przypadku deweloperów, którzy chcą spełnić standard rozmiaru WCAG AAA, rozmiar znacznika należy zwiększyć.

Więcej informacji o zmianie skali markera, dodawaniu tekstu tytułu i innych opcjach znajdziesz w sekcji Podstawowe dostosowywanie markera.

Poniższy przykład pokazuje mapę z 5 kliknięciami, na których można się skupić, zawierającą tekst tytułu i ustawioną na skalę 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.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 przykład

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

  1. Użyj klawisza Tab, aby przejść do pierwszego znacznika. 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 klawisz Enter, aby go „kliknąć”. Jeśli znacznik ma okno informacyjne, możesz je otworzyć, klikając lub naciskając klawisz Enter lub spację. Gdy okno informacyjne zostanie zamknięte, fokus wróci do powiązanego markera.
  3. Ponownie naciśnij Tab, aby przejść do pozostałych elementów sterujących mapy.

Aby zwiększyć dostępność:

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