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

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

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

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

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

JavaScript

async function init() {
    // Import the needed libraries.
    const [{ Marker3DInteractiveElement, PopoverElement }, { PinElement }] =
        await Promise.all([
            google.maps.importLibrary('maps3d'),
            google.maps.importLibrary('marker'),
        ]);

    const map3DElement = document.querySelector('gmp-map-3d');

    // 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({
            glyphText: String(i + 1),
            scale: 1.5,
            glyphColor: '#FFFFFF',
        });
        const popover = new PopoverElement();

        const content = `${String(i + 1)}. ${title}`;
        const header = document.createElement('span');
        // Include the label for screen readers.
        header.ariaLabel = `This is marker ${String(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);

        map3DElement.append(interactiveMarker);
        map3DElement.append(popover);
    });

    document.body.append(map3DElement);
}

void init();
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>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map-3d
            center="34.8405,-111.7909,1322.7"
            range="13279.5"
            tilt="67.44"
            heading="0.01"
            mode="satellite"
            gesture-handling="cooperative"></gmp-map-3d>
    </body>
</html>
index.html

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

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

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

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