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 admite 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 coloque 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 AA para el tamaño mínimo , pero, si los desarrolladores desean satisfacer el estándar WCAG AAA para el tamaño del objetivo , deben aumentar el tamaño del marcador.

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

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

JavaScript

async function init() {
    const [
        { Map3DElement, Marker3DInteractiveElement, PopoverElement },
        { PinElement },
    ] = await Promise.all([
        google.maps.importLibrary('maps3d'),
        google.maps.importLibrary('marker'),
    ]);

    const map = new Map3DElement({
        center: { lat: 34.8405, lng: -111.7909, altitude: 1322.7 },
        range: 13279.5,
        tilt: 67.44,
        heading: 0.01,
        mode: 'SATELLITE',
        gestureHandling: 'COOPERATIVE',
    });

    // 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: `${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);
}

void init();

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;
}

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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
            });
        </script>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

Prueba la muestra

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

  1. Utiliza 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, haz lo siguiente:

  • 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.