Membuat penanda dapat diakses

Anda dapat membuat penanda lebih mudah diakses dengan mengaktifkan penanganan peristiwa klik, menambahkan teks deskriptif untuk pembaca layar, dan menyesuaikan skala penanda.

  • Jika dapat diklik, penanda dapat merespons input keyboard dan mouse.
  • Teks yang ditentukan dalam opsi judul dapat dibaca oleh pembaca layar, dan akan ditampilkan saat pengguna mengarahkan kursor mouse ke penanda.
  • Jika ukuran penanda diperbesar, interaksi dengan penanda di semua perangkat, terutama perangkat layar sentuh, tidak terlalu memerlukan presisi sehingga akan meningkatkan aksesibilitas. Penanda default memenuhi standar ukuran minimum AA WCAG, tetapi bagi developer yang ingin mematuhi standar target ukuran AAA WCAG, ukuran penanda harus diperbesar.

Lihat bagian Penyesuaian penanda dasar untuk mempelajari cara mengubah skala penanda, menambahkan teks judul, dan lainnya.

Contoh berikut menampilkan peta dengan lima penanda yang dapat diklik dan difokuskan yang mencakup teks judul, dan telah disetel ke skala 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

Mencoba Contoh

Untuk melihat penanda menggunakan keyboard:

  1. Gunakan tombol tab untuk fokus pada penanda pertama; jika ada beberapa penanda di peta yang sama, gunakan tombol panah untuk melihat seluruh penanda.
  2. Jika penanda dapat diklik, tekan tombol enter untuk "mengklik". Jika penanda memiliki jendela info, Anda dapat membukanya dengan mengklik, atau dengan menekan tombol enter atau spasi. Saat jendela info ditutup, fokus akan kembali ke penanda terkait.
  3. Tekan tab lagi untuk terus berpindah di antara kontrol peta lainnya.

Untuk meningkatkan aksesibilitas:

  • Tetapkan teks deskriptif untuk penanda menggunakan opsi Marker3DInteractiveElement.title.
  • Tambahkan konten ke slot header dari PopoverElement.
  • Tingkatkan skala penanda menggunakan properti PinElement.scale.