Rendere accessibili gli indicatori

Puoi rendere gli indicatori più accessibili attivando la gestione degli eventi di clic, aggiungendo testo descrittivo per gli screen reader e regolando la scala degli indicatori.

• Quando un indicatore è selezionabile, può rispondere all'input da tastiera e all'input del mouse.
• Il testo specificato nell'opzione del titolo è leggibile dagli screen reader e viene visualizzato quando un utente tiene il puntatore del mouse sopra l'indicatore.
• L'aumento delle dimensioni dei marcatori riduce la precisione necessaria per interagire con loro su tutti i dispositivi, in particolare sui dispositivi touchscreen, e migliora l'accessibilità. I marcatori predefiniti soddisfano lo standard di dimensione minima WCAG AA, ma per gli sviluppatori che mirano a rispettare lo standard di dimensione target WCAG AAA, le dimensioni del marcatore devono essere aumentate.

Consulta la sezione Personalizzazione di base dei marcatori per scoprire come modificare la scala dei marcatori, aggiungere il testo del titolo e altro ancora.

L'esempio seguente mostra una mappa con cinque indicatori cliccabili e selezionabili che includono il testo del titolo e sono stati impostati su una scala di 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

Per navigare tra i segnaposto utilizzando la tastiera:

1. Utilizza il tasto Tab per selezionare il primo indicatore. Se sono presenti più indicatori sulla stessa mappa, utilizza i tasti Freccia per scorrere gli indicatori.
2. Se l'indicatore è selezionabile, premi il tasto Invio per "fare clic". Se un indicatore ha una finestra informativa, puoi aprirla facendo clic o premendo il tasto Invio o la barra spaziatrice. Quando la finestra informativa si chiude, lo stato attivo torna al marker associato.
3. Premi di nuovo il tasto Tab per continuare a spostarti tra gli altri controlli della mappa.

Per migliorare l'accessibilità:

• Imposta un testo descrittivo per un indicatore utilizzando l'opzione Marker3DInteractiveElement.title.
• Aggiungi contenuti allo spazio header di PopoverElement.
• Aumenta la scala dei marcatori utilizzando la proprietà PinElement.scale.