İşaretçileri tıklanabilir ve erişilebilir hale getirin

İşaretçileri daha erişilebilir hale getirmek için tıklama etkinliği işlemeyi etkinleştirip ekran okuyucular için açıklayıcı metin kullanmak ve işaretçi ölçeğini ayarlamaktır.

• Tıklanabilir (veya sürüklenebilir) olan işaretçiler, klavyeye yanıt verebilir ve yapabilirsiniz.
• title seçeneğinde belirtilen metin, ekran okuyucular tarafından okunabilir ve Kullanıcı fare işaretçisini işaretçinin üzerinde tuttuğunda görüntülenir.
• İşaretçilerin boyutunu büyütmek, etkileşim için gereken hassasiyeti azaltır. başta dokunmatik ekranlı cihazlar olmak üzere tüm cihazlarda erişilebilirlik. Varsayılan işaretçiler WCAG AA minimum boyutunu karşılar standarttır ancak WCAG AAA hedef boyutuna uymayı amaçlayan geliştiriciler içindir standart olarak işaretçi boyutu artırılmalıdır.

İşaretçiyi nasıl değiştireceğinizi öğrenmek için temel işaretçi özelleştirme bölümüne bakın başlık metni ekleyebilir ve daha fazlasını yapabilirsiniz.

Aşağıdaki örnekte tıklanabilir, odaklanılabilir beş işaretçinin bulunduğu bir harita başlık metnini içermeli ve 1, 5x ölçeğe ayarlanmıştır:

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

1. İlk işaretçiye odaklanmak için sekme tuşunu kullanın; birden fazla üzerinde gezinirken işaretçiler arasında geçiş yapmak için ok tuşlarını kullanın.
2. İşaretçi tıklanabilir durumdaysa Enter tuşuna basarak "tıklayın". Bir işaretçi bir bilgi penceresini açmak için, bu pencereyi tıklayarak veya Enter tuşuna basarak ya da boşluk tuşuna basın. Bilgi penceresi kapandığında odak ilişkili sayfaya döner kullanabilirsiniz.
3. Diğer harita denetimlerinde ilerlemeye devam etmek için sekme tuşuna tekrar basın.

İşaretçiyi tıklanabilir yapma

Bu bölümde, işaretçilerin tıklama etkinliklerine yanıt vermesini nasıl sağlayacağınız gösterilmektedir. Bir işaretçiyi tıklanabilir hale getirmek için:

• gmpClickable özelliğini true olarak ayarlayın.

const marker = new AdvancedMarkerElement({
    position,
    map,
    title: `${i + 1}. ${title}`,
    content: pin.element,
    gmpClickable: true,
});
index.ts

const marker = new AdvancedMarkerElement({
  position,
  map,
  title: `${i + 1}. ${title}`,
  content: pin.element,
  gmpClickable: true,
});
index.js

• Kullanıcı girişine yanıt vermek için bir tıklama etkinliği işleyici ekleyin.

// Add a click listener for each marker, and set up the info window.
marker.addListener('click', ({ domEvent, latLng }) => {
    const { target } = domEvent;
    infoWindow.close();
    infoWindow.setContent(marker.title);
    infoWindow.open(marker.map, marker);
});
index.ts

// Add a click listener for each marker, and set up the info window.
marker.addListener("click", ({ domEvent, latLng }) => {
  const { target } = domEvent;

  infoWindow.close();
  infoWindow.setContent(marker.title);
  infoWindow.open(marker.map, marker);
});
index.js

• Bir işaretçiyi tekrar tıklanamaz duruma getirmek için tıklamayı kaldırmak üzere removeListener komutunu çağırın etkinlik işleyici:

  // Remove the listener.
  google.maps.event.removeListener(clickListener);
  

Erişilebilirliği daha da iyileştirmek için:

• AdvancedMarkerElement.title kullanarak işaretçi için açıklayıcı metin ayarlayın seçeneğini belirleyin.
• PinElement öğesinin scale özelliğini kullanarak işaretçi ölçeğini artırın.

Örnek kodu tamamlayın

async function initMap() {
    // Request needed libraries.
    const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

    const map = new Map(document.getElementById("map") as HTMLElement, {
        zoom: 12,
        center: { lat: 34.84555, lng: -111.8035 },
        mapId: '4504f8b37365c3d0',
    });

    // 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"
        },
    ];

    // Create an info window to share between markers.
    const infoWindow = new InfoWindow();

    // Create the markers.
    tourStops.forEach(({position, title}, i) => {
        const pin = new PinElement({
            glyph: `${i + 1}`,
            scale: 1.5,
        });
        const marker = new AdvancedMarkerElement({
            position,
            map,
            title: `${i + 1}. ${title}`,
            content: pin.element,
            gmpClickable: true,
        });
        // Add a click listener for each marker, and set up the info window.
        marker.addListener('click', ({ domEvent, latLng }) => {
            const { target } = domEvent;
            infoWindow.close();
            infoWindow.setContent(marker.title);
            infoWindow.open(marker.map, marker);
        });
    });
}

initMap();
index.ts

async function initMap() {
  // Request needed libraries.
  const { Map, InfoWindow } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary(
    "marker",
  );
  const map = new Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: 34.84555, lng: -111.8035 },
    mapId: "4504f8b37365c3d0",
  });
  // 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",
    },
  ];
  // Create an info window to share between markers.
  const infoWindow = new InfoWindow();

  // Create the markers.
  tourStops.forEach(({ position, title }, i) => {
    const pin = new PinElement({
      glyph: `${i + 1}`,
      scale: 1.5,
    });
    const marker = new AdvancedMarkerElement({
      position,
      map,
      title: `${i + 1}. ${title}`,
      content: pin.element,
      gmpClickable: true,
    });

    // Add a click listener for each marker, and set up the info window.
    marker.addListener("click", ({ domEvent, latLng }) => {
      const { target } = domEvent;

      infoWindow.close();
      infoWindow.setContent(marker.title);
      infoWindow.open(marker.map, marker);
    });
  });
}

initMap();
index.js

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
style.css

<html>
  <head>
    <title>Advanced Marker Accessibility</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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
  </body>
</html>
index.html