הסימונים יהיו נגישים ונגישים

אפשר להפוך את הסמנים לנגישים יותר על ידי הפעלת טיפול באירועי קליקים, הוספת טקסט תיאורי לקוראי מסך ושינוי קנה המידה של הסמנים.

  • כשסמן הוא קליקבילי (או שהוא ניתן לגרירה), הוא יכול להגיב לקלט של המקלדת והעכבר.
  • טקסט שצוין באפשרות title קריא על ידי קוראי מסך, ויוצג כשהמשתמש מחזיק את סמן העכבר מעל הסמן.
  • הגדלת הסמנים מפחיתה את הדיוק שנדרש כדי לבצע איתם אינטראקציה בכל המכשירים – במיוחד במכשירים עם מסך מגע, ומשפרת את הנגישות. סמני ברירת מחדל עומדים בתקן הגודל המינימלי של WCAG AA, אבל למפתחים שרוצים לעמוד בגודל היעד של WCAG AAA צריך להגדיל את גודל הסמן.

במאמר התאמה אישית בסיסית של סמנים מוסבר איך לשנות את קנה המידה של הסמנים, להוסיף טקסט לכותרת ועוד.

הדוגמה הבאה מציגה מפה עם חמישה סמנים שניתן להתמקד בהם, שניתן ללחוץ עליהם, שכוללים טקסט כותרת, שהוגדרו לקנה מידה של פי 1.5:

כדי לנווט בסמנים באמצעות המקלדת:

  1. אפשר להשתמש במקש Tab כדי להתמקד בסמן הראשון. אם יש מספר סמנים באותה מפה, אפשר להשתמש במקשי החיצים כדי לעבור בין הסמנים.
  2. אם הסמן ניתן ללחיצה, מקישים על מקש Enter כדי "ללחוץ". אם לסמן יש חלון מידע, תוכלו לפתוח אותו על ידי לחיצה או על מקש Enter או על מקש הרווח. כשחלון המידע נסגר, המיקוד יחזור לסמן המשויך.
  3. מקישים שוב על Tab כדי להמשיך לנוע בין שאר פקדי המפה.

הגדרת סמן כניתן ללחיצה

בקטע הזה מוסבר איך לגרום לסמנים להגיב לאירועי קליקים. כדי להפוך סמן כקליקבילי:

  • מגדירים את המאפיין gmpClickable לערך true.

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

  • מוסיפים האזנה לאירוע קליק כדי להגיב לקלט של משתמשים.

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

  • כדי שלא ניתן יהיה ללחוץ על סמן שוב, קוראים לפונקציה removeListener כדי להסיר את ה-click event listener:

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

כדי לשפר את הנגישות עוד יותר:

  • אפשר להגדיר טקסט תיאורי לסמן באמצעות האפשרות AdvancedMarkerElement.title.
  • הגדלת קנה המידה של הסמנים באמצעות התכונה scale של PinElement.

השלמת הקוד לדוגמה

הצגת קוד המקור המלא לדוגמה

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>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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

כדאי לנסות דוגמה