Rendere accessibili gli indicatori

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

  • Quando un marcatore è selezionabile, può rispondere all'input da tastiera e mouse.
  • Il testo specificato nell'opzione Titolo è leggibile dagli screen reader e viene visualizzato quando un utente passa il puntatore del mouse sopra il marcatore.
  • L'aumento delle dimensioni dei marcatori riduce la precisione necessaria per interagire con loro su tutti i dispositivi, in particolare quelli 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 WCAG AAA, la dimensione del marcatore deve essere aumentata.

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 initMap() {
    const { Map3DElement, Marker3DInteractiveElement, PopoverElement } = await google.maps.importLibrary("maps3d");
    const { PinElement } = await google.maps.importLibrary("marker");
    const map = new Map3DElement({
        center: { lat: 34.8405, lng: -111.7909, altitude: 1322.70 }, range: 13279.50, tilt: 67.44, heading: 0.01,
        mode: 'SATELLITE'
    });
    // 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({
            glyph: `${i + 1}`,
            scale: 1.5,
            glyphColor: "#FFFFFF"
        });
        const popover = new PopoverElement();
        const content = `${i + 1}. ${title}`;
        const header = document.createElement('span');
        // Include the label for screen readers.
        header.ariaLabel = `This is marker ${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);
        map.append(interactiveMarker);
        map.append(popover);
    });
    document.body.append(map);
}
initMap();
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>
  </head>
  <body>
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta",});</script>
  </body>
</html>
index.html

Prova campione

Per navigare tra i marcatori utilizzando la tastiera:

  1. Utilizza il tasto Tab per selezionare il primo marcatore. Se sono presenti più marcatori sulla stessa mappa, utilizza i tasti Freccia per scorrere i marcatori.
  2. Se il marcatore è 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 delle informazioni 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 il 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.