دردسترس قرار دادن نشانگرها

می‌توانید با فعال کردن مدیریت رویداد کلیک، افزودن نوشتار توصیفی برای صفحه‌خوان‌ها، و تنظیم مقیاس نشانگر، نشانگرها را دسترس‌پذیرتر کنید.

• وقتی نشانگر قابل‌کلیک باشد، می‌تواند به ورودی صفحه‌کلید و موشواره پاسخ دهد.
• نوشتار مشخص‌شده در گزینه عنوان توسط صفحه‌خوان‌ها خوانده می‌شود و وقتی کاربر نشانگر موشواره را روی نشانگر نگه می‌دارد نمایش داده می‌شود.
• افزایش اندازه نشانگرها دقت لازم برای تعامل با آن در همه دستگاه‌ها، به‌ویژه دستگاه‌های دارای صفحه لمسی، را کاهش می‌دهد و دسترسی‌پذیری را بهبود می‌بخشد. نشانگرهای پیش‌فرض با استاندارد حداقل اندازه WCAG AA مطابقت دارند، اما برای توسعه‌دهندگانی که قصد دارند با استاندارد اندازه هدف WCAG AAA مطابقت داشته باشند، اندازه نشانگر باید افزایش یابد.

برای آشنایی با نحوه تغییر مقیاس نشانگر، افزودن نوشتار عنوان، و موارد دیگر، سفارشی‌سازی نشانگر پایه را ببینید.

مثال زیر نقشه‌ای را نشان می‌دهد که پنج نشانگر کلیک‌کردنی و قابل‌تمرکز دارد که شامل نوشتار عنوان است و مقیاس آن‌ها روی ۱٫۵ برابر تنظیم شده است:

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. برای تمرکز روی اولین نشانگر از کلید جهش استفاده کنید؛ اگر چندین نشانگر در یک نقشه وجود دارد، از کلیدهای جهت‌نما برای پیمایش بین نشانگرها استفاده کنید.
2. اگر نشانگر قابل‌کلیک است، کلید Enter را فشار دهید تا «کلیک» شود. اگر نشانگر پنجره اطلاعات داشته باشد، می‌توانید آن را با کلیک کردن یا فشار دادن کلید Enter یا کلید فاصله باز کنید. وقتی پنجره اطلاعات بسته شود، تمرکز به نشانگر مربوطه برمی‌گردد.
3. برای ادامه حرکت در بقیه کنترل‌های نقشه، دوباره کلید جهش را فشار دهید.

برای بهبود دسترس‌پذیری:

• بااستفاده از گزینه Marker3DInteractiveElement.title ، نوشتار توصیفی برای نشانگر تنظیم کنید.
• محتوا را به جایگاه header از PopoverElement اضافه کنید.
• بااستفاده از دارایی PinElement.scale، مقیاس نشانگر را افزایش دهید.