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

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

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

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

בדוגמה הבאה מוצגת מפה עם חמישה סמנים קליקביליים שאפשר להתמקד בהם, שכוללים טקסט של כותרת והוגדרו עם קנה מידה של פי 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.