İşaretçileri tıklanabilir ve 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 (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 üzerine getirdiğinde gösterilir.
• İş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 "tıklamak" için Enter tuşuna bası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 nasıl yanıt vereceği gösterilmektedir. İş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

Not: TypeScript ve Google Haritalar'ı kullanmayla ilgili kılavuzu okuyun.

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

Not: TypeScript ve Google Haritalar'ı kullanmayla ilgili kılavuzu okuyun.

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

• İşaretçinin tekrar tıklanamayacak hale gelmesini sağlamak 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 artırmak için:

• AdvancedMarkerElement.title seçeneğini kullanarak bir 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.

Eksiksiz örnek kod

Örnek kaynak kodunun tamamını görme

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

Not: TypeScript ve Google Haritalar'ı kullanmayla ilgili kılavuzu okuyun.

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

Not: JavaScript, TypeScript snippet'inden derlenir.

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

JSFiddle.net Google Cloud Shell