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

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

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

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

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

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.