Markierungen anklickbar und zugänglich machen

Sie können Markierungen barrierefreier gestalten, indem Sie die Klickereignisbehandlung aktivieren, beschreibenden Text für Screenreader hinzufügen und die Markierungsskala anpassen.

• Wenn eine Markierung anklickbar (oder ziehbar) ist, kann sie auf Tastatur- und Mauseingaben reagieren.
• Text, der in der Option title angegeben wird, kann von Screenreadern gelesen werden. Er wird eingeblendet, wenn ein Nutzer den Mauszeiger auf die Markierung bewegt.
• Wenn die Markierungen größer sind, kann mit ihnen auf allen Geräten genauer interagiert werden, besonders auf solchen mit Touchscreens. Außerdem wird dadurch die Barrierefreiheit verbessert. Standardmarkierungen erfüllen die Standards der Web Content Accessibility Guidelines (WCAG) für die Mindestgröße AA. Jedoch sollten Entwickler, die sich an die WCAG-Standards für die Zielgröße AAA halten möchten, eine größere Markierungsgröße auswählen.

Unter Einfache Anpassung von Markierungen erfahren Sie unter anderem, wie Sie den Maßstab von Markierungen ändern und Titeltext hinzufügen.

Das folgende Beispiel zeigt eine Karte mit fünf anklickbaren, fokussierbaren Markierungen mit Titeltext, die auf 1,5-facher Skalierung eingestellt sind:

So verwenden Sie die Tastatur, um zwischen Markierungen zu wechseln:

1. Mit der Tabulatortaste können Sie den Fokus auf die erste Markierung legen. Falls sich auf der Karte mehrere Markierungen befinden, können Sie mit den Pfeiltasten zwischen den Markierungen wechseln.
2. Wenn die Markierung anklickbar ist, drücken Sie die Eingabetaste, um sie wie mit einem Klick auszuwählen. Hat eine Markierung ein Infofenster, können Sie zum Öffnen des Fensters darauf klicken oder die Eingabe- oder Leertaste drücken. Nach dem Schließen des Infofensters ist wieder die zugehörige Markierung im Fokus.
3. Drücken Sie weiter auf die Tabulatortaste, um nacheinander die restlichen Kartensteuerelemente in den Fokus zu bringen.

Markierungen anklickbar machen

In diesem Abschnitt erfahren Sie, wie Sie Markierungen auf Klickereignisse reagieren lassen. So machen Sie eine Markierung anklickbar:

• Legen Sie die Property gmpClickable auf true fest.

TypeScript

const marker = new AdvancedMarkerElement({
    position,
    map,
    title: `${i + 1}. ${title}`,
    content: pin.element,
    gmpClickable: true,
});
index.ts

Hinweis:Lesen Sie den Leitfaden zur Verwendung von TypeScript und Google Maps.

JavaScript

const marker = new AdvancedMarkerElement({
  position,
  map,
  title: `${i + 1}. ${title}`,
  content: pin.element,
  gmpClickable: true,
});
index.js

• Fügen Sie einen Klick-Ereignis-Listener hinzu, um auf Nutzereingaben zu reagieren.

TypeScript

// Add a click listener for each marker, and set up the info window.
marker.addListener('click', ({ domEvent, latLng }) => {
    const { target } = domEvent;
    infoWindow.close();
    infoWindow.setContent(marker.title);
    infoWindow.open(marker.map, marker);
});
index.ts

Hinweis:Lesen Sie den Leitfaden zur Verwendung von TypeScript und Google Maps.

JavaScript

// Add a click listener for each marker, and set up the info window.
marker.addListener("click", ({ domEvent, latLng }) => {
  const { target } = domEvent;

  infoWindow.close();
  infoWindow.setContent(marker.title);
  infoWindow.open(marker.map, marker);
});
index.js

• Wenn eine Markierung nicht mehr anklickbar sein soll, entfernen Sie den Listener für Click-Events:removeListener

  // Remove the listener.
  google.maps.event.removeListener(clickListener);
  

So kannst du die Barrierefreiheit weiter verbessern:

• Verwenden Sie die Option AdvancedMarkerElement.title, um beschreibenden Text für eine Markierung festzulegen.
• Mit der Property scale von PinElement können Sie die Markierungsskala erhöhen.

Vollständiges Codebeispiel

Vollständigen Quellcode des Beispiels ansehen

TypeScript

async function initMap() {
    // Request needed libraries.
    const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

    const map = new Map(document.getElementById("map") as HTMLElement, {
        zoom: 12,
        center: { lat: 34.84555, lng: -111.8035 },
        mapId: '4504f8b37365c3d0',
    });

    // 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"
        },
    ];

    // Create an info window to share between markers.
    const infoWindow = new InfoWindow();

    // Create the markers.
    tourStops.forEach(({position, title}, i) => {
        const pin = new PinElement({
            glyph: `${i + 1}`,
            scale: 1.5,
        });
        const marker = new AdvancedMarkerElement({
            position,
            map,
            title: `${i + 1}. ${title}`,
            content: pin.element,
            gmpClickable: true,
        });
        // Add a click listener for each marker, and set up the info window.
        marker.addListener('click', ({ domEvent, latLng }) => {
            const { target } = domEvent;
            infoWindow.close();
            infoWindow.setContent(marker.title);
            infoWindow.open(marker.map, marker);
        });
    });
}

initMap();
index.ts

Hinweis:Lesen Sie den Leitfaden zur Verwendung von TypeScript und Google Maps.

JavaScript

async function initMap() {
  // Request needed libraries.
  const { Map, InfoWindow } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary(
    "marker",
  );
  const map = new Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: 34.84555, lng: -111.8035 },
    mapId: "4504f8b37365c3d0",
  });
  // 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",
    },
  ];
  // Create an info window to share between markers.
  const infoWindow = new InfoWindow();

  // Create the markers.
  tourStops.forEach(({ position, title }, i) => {
    const pin = new PinElement({
      glyph: `${i + 1}`,
      scale: 1.5,
    });
    const marker = new AdvancedMarkerElement({
      position,
      map,
      title: `${i + 1}. ${title}`,
      content: pin.element,
      gmpClickable: true,
    });

    // Add a click listener for each marker, and set up the info window.
    marker.addListener("click", ({ domEvent, latLng }) => {
      const { target } = domEvent;

      infoWindow.close();
      infoWindow.setContent(marker.title);
      infoWindow.open(marker.map, marker);
    });
  });
}

initMap();
index.js

Hinweis:Der JavaScript-Code wird aus dem TypeScript-Snippet erstellt.

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
style.css

HTML

<html>
  <head>
    <title>Advanced Marker Accessibility</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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
  </body>
</html>
index.html

Testbeispiel

JSFiddle.net Google Cloud Shell