Rendre les repères accessibles

Vous pouvez rendre les repères plus accessibles en activant la gestion des événements de clic, en ajoutant du texte descriptif pour les lecteurs d'écran et en ajustant l'échelle des repères.

  • Lorsqu'un repère est cliquable, il peut répondre aux entrées de clavier et de souris.
  • Le texte spécifié dans l'option "title" peut être lu par les lecteurs d'écran et s'affiche lorsqu'un utilisateur pointe sur le repère avec la souris.
  • Augmenter la taille des repères diminue la précision requise pour interagir avec eux sur l'ensemble des appareils (en particulier ceux dotés d'un écran tactile) et améliore l'accessibilité. Les repères par défaut respectent la norme WCAG pour la taille minimale (AA), mais les développeurs qui souhaitent respecter la norme WCAG pour la taille cible (AAA) doivent augmenter la taille des repères.

Consultez Personnalisation des repères de base pour savoir comment modifier l'échelle des repères, ajouter du texte de titre et plus encore.

L'exemple suivant montre une carte avec cinq repères cliquables et sélectionnables qui incluent du texte de titre et ont été définis sur une échelle de 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

Essayer l'exemple

Pour parcourir les repères à l'aide du clavier :

  1. Utilisez la touche Tabulation pour sélectionner le premier repère. S'il y a plusieurs repères sur la même carte, utilisez les touches fléchées pour passer de l'un à l'autre.
  2. Si le repère est cliquable, appuyez sur la touche Entrée pour "cliquer" dessus. Si un repère possède une fenêtre d'informations, vous pouvez l'ouvrir en cliquant dessus, ou en appuyant sur la touche Entrée ou la barre d'espace. Lorsque la fenêtre d'informations se ferme, le repère correspondant est de nouveau affiché.
  3. Appuyez de nouveau sur la touche Tabulation pour continuer à parcourir les autres commandes de la carte.

Pour améliorer l'accessibilité :

  • Définissez le texte descriptif d'un repère à l'aide de l'option Marker3DInteractiveElement.title.
  • Ajoutez du contenu à l'emplacement header de PopoverElement.
  • Augmentez l'échelle des repères à l'aide de la propriété PinElement.scale.