איך מגדירים סמנים שניתן ללחוץ עליהם ונגישים

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

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

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

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

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

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

איך הופכים סמן לקישור ישיר

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

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

TypeScript

const pin = new PinElement({
    glyphText: `${i + 1}`,
    scale: 1.5,
});
const marker = new AdvancedMarkerElement({
    position,
    title: `${i + 1}. ${title}`,
    gmpClickable: true,
});
marker.append(pin);
mapElement.append(marker);
index.ts

הערה: כדאי לקרוא את המדריך לשימוש ב-TypeScript ובמפות Google.

JavaScript

const pin = new PinElement({
    glyphText: `${i + 1}`,
    scale: 1.5,
});
const marker = new AdvancedMarkerElement({
    position,
    title: `${i + 1}. ${title}`,
    gmpClickable: true,
});
marker.append(pin);
mapElement.append(marker);
index.js

• מוסיפים רכיב event listener מסוג gmp-click כדי להגיב לקלט של המשתמש.

TypeScript

// Add a click listener for each marker, and set up the info window.
marker.addEventListener('gmp-click', () => {
    infoWindow.close();
    infoWindow.setContent(marker.title);
    infoWindow.open(marker.map, marker);
});
index.ts

הערה: כדאי לקרוא את המדריך לשימוש ב-TypeScript ובמפות Google.

JavaScript

// Add a click listener for each marker, and set up the info window.
marker.addEventListener('gmp-click', () => {
    infoWindow.close();
    infoWindow.setContent(marker.title);
    infoWindow.open(marker.map, marker);
});
index.js

• כדי להפוך סמן ללא ניתן ללחיצה שוב:

  • מפעילים את removeEventListener כדי להסיר את רכיב ה-event listener של gmp-click:

  // Remove the listener.
  marker.removeEventListener('gmp-click', clickListener);
  

  • לחלופין, אפשר להגדיר את המאפיין gmpClickable לערך false.

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

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

קוד לדוגמה מלא

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

TypeScript

const mapElement = document.querySelector('gmp-map')!;

async function init() {
    // Request needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement, PinElement }] =
        await Promise.all([
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('marker'),
        ]);

    // 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({
            glyphText: `${i + 1}`,
            scale: 1.5,
        });
        const marker = new AdvancedMarkerElement({
            position,
            title: `${i + 1}. ${title}`,
            gmpClickable: true,
        });
        marker.append(pin);
        mapElement.append(marker);
        // Add a click listener for each marker, and set up the info window.
        marker.addEventListener('gmp-click', () => {
            infoWindow.close();
            infoWindow.setContent(marker.title);
            infoWindow.open(marker.map, marker);
        });
    });
}

void init();
index.ts

הערה: כדאי לקרוא את המדריך לשימוש ב-TypeScript ובמפות Google.

JavaScript

const mapElement = document.querySelector('gmp-map');

async function init() {
    // Request needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement, PinElement }] =
        await Promise.all([
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('marker'),
        ]);

    // 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({
            glyphText: `${i + 1}`,
            scale: 1.5,
        });
        const marker = new AdvancedMarkerElement({
            position,
            title: `${i + 1}. ${title}`,
            gmpClickable: true,
        });
        marker.append(pin);
        mapElement.append(marker);
        // Add a click listener for each marker, and set up the info window.
        marker.addEventListener('gmp-click', () => {
            infoWindow.close();
            infoWindow.setContent(marker.title);
            infoWindow.open(marker.map, marker);
        });
    });
}

void init();
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>

        <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
            zoom="12"
            center="34.84555,-111.8035"
            map-id="4504f8b37365c3d0"></gmp-map>
    </body>
</html>
index.html