הגדרת סמנים כנגישים

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

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

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

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

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

ניסיון של דוגמה

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

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

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

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