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 znacznika, dodawaniu tekstu tytułu i innych opcjach znajdziesz w sekcji Podstawowe dostosowywanie znacznika.

Poniższy przykład pokazuje mapę z 5 kliknięciami i znacznikami, na których można się skupić.Zawierają one tekst tytułu i zostały ustawione 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

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

  1. Użyj klawisza Tab, aby przejść do pierwszego znacznika. Jeśli na 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 je lub naciskając klawisz Enter lub spację. Gdy okno informacyjne zostanie zamknięte, fokus wróci do powiązanego markera.
  3. Naciśnij ponownie klawisz Tab, aby przejść do pozostałych elementów sterujących mapy.

Aby zwiększyć dostępność:

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