İşaretçileri erişilebilir hale getirme

Tıklama etkinliği işlemeyi etkinleştirerek, ekran okuyucular için açıklayıcı metin ekleyerek ve işaretleyici ölçeğini ayarlayarak işaretleyicileri daha erişilebilir hale getirebilirsiniz.

  • Tıklanabilir bir işaretçi, klavye ve fare girişine yanıt verebilir.
  • Başlık seçeneğinde belirtilen metin, ekran okuyucular tarafından okunabilir ve kullanıcı fare işaretçisini işaretçinin üzerinde tuttuğunda gösterilir.
  • İşaretçilerin boyutunu artırmak, özellikle dokunmatik ekranlı cihazlar olmak üzere tüm cihazlarda işaretçiyle etkileşim kurmak için gereken hassasiyeti azaltır ve erişilebilirliği artırır. Varsayılan işaretçiler, WCAG AA minimum boyut standardını karşılar. Ancak WCAG AAA hedef boyut standardına uymayı amaçlayan geliştiriciler için işaretçi boyutu artırılmalıdır.

İşaretçi ölçeğini değiştirme, başlık metni ekleme ve daha fazlasını öğrenmek için temel işaretçi özelleştirme bölümüne bakın.

Aşağıdaki örnekte, başlık metni içeren ve 1,5 kat ölçeğe ayarlanmış, odaklanılabilir beş tıklanabilir işaretçinin bulunduğu bir harita gösterilmektedir:

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

Örneği deneyin

Klavyeyi kullanarak işaretçiler arasında gezinmek için:

  1. Sekme tuşunu kullanarak ilk işaretçiye odaklanın. Aynı haritada birden fazla işaretçi varsa ok tuşlarını kullanarak işaretçiler arasında geçiş yapın.
  2. İşaretçi tıklanabilirse "tıklamak" için Enter tuşuna basın. Bilgi penceresi olan bir işaretçiyi tıklayarak veya Enter tuşuna ya da boşluk çubuğuna basarak açabilirsiniz. Bilgi penceresi kapandığında odak, ilişkili işaretçiye geri döner.
  3. Harita kontrollerinin geri kalanında gezinmeye devam etmek için Sekme tuşuna tekrar basın.

Erişilebilirliği artırmak için:

  • Marker3DInteractiveElement.title seçeneğini kullanarak bir işaretçi için açıklayıcı metin ayarlayın.
  • header alanına PopoverElement içeriği ekleyin.
  • PinElement.scale özelliğini kullanarak işaretçi ölçeğini artırın.