Cómo hacer que los marcadores sean accesibles

Puedes hacer que los marcadores sean más accesibles si habilitas el control de eventos de clic, agregas texto descriptivo para los lectores de pantalla y ajustas la escala del marcador.

  • Cuando un marcador ofrece la posibilidad de hacer clics, puede responder a las entradas del teclado y del mouse.
  • El texto especificado en la opción de título es legible para los lectores de pantalla y se mostrará cuando un usuario mantenga el puntero del mouse sobre el marcador.
  • Aumentar el tamaño de los marcadores reduce la precisión que se requiere para interactuar con ellos en todos los dispositivos (en especial en dispositivos de pantalla táctil) y mejora la accesibilidad. Los marcadores predeterminados cumplen con el estándar WCAG para el tamaño mínimo AA, pero, si los desarrolladores desean satisfacer el estándar WCAG para el tamaño del objetivo AAA, deben aumentar el tamaño del marcador.

Consulta Personalización básica de los marcadores para aprender a cambiar la escala de los marcadores, agregar texto de título y mucho más.

En el siguiente ejemplo, se muestra un mapa con cinco marcadores seleccionables que admiten clics y que incluyen texto de título, y se configuraron con una escala de 1.5:

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

Prueba la muestra

Para navegar por los marcadores con el teclado, sigue estos pasos:

  1. Usa la tecla Tab para posicionarte en el primer marcador. Si hay varios marcadores en un mismo mapa, usa las teclas de flecha para desplazarte entre ellos.
  2. Si el marcador admite la posibilidad de hacer clics, presiona la tecla Intro para hacerlo. Si un marcador tiene una ventana de información, puedes hacer clic en él o bien presionar la tecla Intro o la barra espaciadora para abrirla. Cuando se cierre la ventana de información, el foco volverá al marcador asociado.
  3. Vuelve a presionar la tecla Tab para seguir moviéndote por el resto de los controles del mapa.

Para mejorar la accesibilidad, sigue estos pasos:

  • Establece texto descriptivo para un marcador con la opción Marker3DInteractiveElement.title.
  • Agrega contenido a la ranura header de PopoverElement.
  • Aumenta la escala del marcador con la propiedad PinElement.scale.