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

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 (veya sürüklemeli) işaretçiler, klavye ve fare girişlerine yanıt verebilir.
  • 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çi boyutunu büyütmek, ö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 boyutu standardını karşılar ancak WCAG AAA hedef boyutu 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,5x ölçeğe ayarlanmış beş tıklanabilir, odaklanılabilir işaretçi içeren bir harita gösterilmektedir:

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

  1. İlk işaretçiye odaklanmak için sekme tuşunu kullanın. Aynı haritada birden fazla işaretçi varsa 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çide bilgi penceresi varsa 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ı arasında gezinmeye devam etmek için sekme tuşuna tekrar basın.

İşaretçiyi tıklanabilir hale getirme

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.

TypeScript

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

JavaScript

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.

TypeScript

// 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

JavaScript

// 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 hale getirmek için tıklama etkinliği dinleyicisini kaldırmak üzere removeListener işlevini çağırın:

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

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

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

Örnek kodu tamamlayın

Örnek kaynak kodunun tamamına bakın

TypeScript

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

JavaScript

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

CSS

/* 
 * 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

<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

Örneği Deneyin