Markierungen anklickbar und zugänglich machen

Sie können Markierungen barrierefreier machen, indem Sie die Verarbeitung von Klickereignissen 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 und wird angezeigt, 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 den Mindeststandard für die Größe gemäß WCAG AA Entwickler, die den Zielstandard für die Größe gemäß WCAG AAA erfüllen möchten, sollten die Markierungsgröße erhöhen.

Unter Einfache Anpassung von Markierungen finden Sie eine Anleitung dazu, wie Sie die Markierung sskala ändern und Titeltext hinzufügen.

Das folgende Beispiel zeigt eine Karte mit fünf anklickbaren, fokussierbaren Markierungen, die Titeltext enthalten und auf die 1,5-fache Skala festgelegt wurden:

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 so konfigurieren, dass sie auf Klickereignisse reagieren. So machen Sie eine Markierung anklickbar:

  • Setzen Sie die Property gmpClickable auf true.

TypeScript

const pin = new PinElement({
    //@ts-ignore
    glyphText: `${i + 1}`,
    scale: 1.5,
});
const marker = new AdvancedMarkerElement({
    position,
    title: `${i + 1}. ${title}`,
    gmpClickable: true,
});
marker.append(pin);
mapElement.append(marker);
index.ts

JavaScript

const pin = new PinElement({
    //@ts-ignore
    glyphText: `${i + 1}`,
    scale: 1.5,
});
const marker = new AdvancedMarkerElement({
    position,
    title: `${i + 1}. ${title}`,
    gmpClickable: true,
});
marker.append(pin);
mapElement.append(marker);
index.js

  • Fügen Sie einen Listener für Klickereignisse 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

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, rufen Sie removeListener auf, um den Listener für Klickereignisse zu entfernen:
// Remove the listener.
google.maps.event.removeListener(clickListener);

So verbessern Sie die Barrierefreiheit weiter:

  • Legen Sie mit der Option AdvancedMarkerElement.title beschreibenden Text für eine Markierung fest.
  • Erhöhen Sie die Markierungsskala mit der Property scale von PinElement.

Vollständiges Codebeispiel

Vollständigen Quellcode des Beispiels ansehen

TypeScript

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

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;

    // 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({
            //@ts-ignore
            glyphText: `${i + 1}`,
            scale: 1.5,
        });
        const marker = new AdvancedMarkerElement({
            position,
            title: `${i + 1}. ${title}`,
            gmpClickable: true,
        });
        marker.append(pin);
        mapElement.append(marker);
        // 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

JavaScript

const mapElement = document.querySelector('gmp-map');
async function initMap() {
    // Request needed libraries.
    const { Map, InfoWindow } = (await google.maps.importLibrary('maps'));
    const { AdvancedMarkerElement, PinElement } = (await google.maps.importLibrary('marker'));
    // 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({
            //@ts-ignore
            glyphText: `${i + 1}`,
            scale: 1.5,
        });
        const marker = new AdvancedMarkerElement({
            position,
            title: `${i + 1}. ${title}`,
            gmpClickable: true,
        });
        marker.append(pin);
        mapElement.append(marker);
        // 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

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>

        <!-- 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: "weekly", internalUsageAttributionIds: "gmp_git_jsapisamples_v1_advanced-markers" });</script>
    </head>
    <body>
        <gmp-map
            zoom="12"
            center="34.84555,-111.8035"
            map-id="4504f8b37365c3d0"></gmp-map>
    </body>
</html>
index.html

Testbeispiel