Markierungen barrierefrei machen

Sie können Markierungen besser zugänglich machen, indem Sie die Verarbeitung von Klickereignissen aktivieren, beschreibenden Text für Screenreader hinzufügen und die Markierungsskala anpassen.

• Wenn eine Markierung anklickbar ist, kann sie auf Tastatur- und Mauseingaben reagieren.
• Text, der in der Option „title“ angegeben wird, kann von Screenreadern gelesen werden. Er 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 die WCAG AA-Mindestgröße Standard, aber für Entwickler, die sich an den WCAG AAA-Zielgrößenstandard halten möchten, sollte die Markierungsgröße erhöht werden.

Unter Einfache Anpassung von Markierungen finden Sie eine Anleitung dazu, wie Sie die Markierungsskala ä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 Größe skaliert wurden:

JavaScript

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

    const map3DElement = document.querySelector('gmp-map-3d');

    // 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: String(i + 1),
            scale: 1.5,
            glyphColor: '#FFFFFF',
        });
        const popover = new PopoverElement();

        const content = `${String(i + 1)}. ${title}`;
        const header = document.createElement('span');
        // Include the label for screen readers.
        header.ariaLabel = `This is marker ${String(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);

        map3DElement.append(interactiveMarker);
        map3DElement.append(popover);
    });

    document.body.append(map3DElement);
}

void init();
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>
        <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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map-3d
            center="34.8405,-111.7909,1322.7"
            range="13279.5"
            tilt="67.44"
            heading="0.01"
            mode="satellite"
            gesture-handling="cooperative"></gmp-map-3d>
    </body>
</html>
index.html

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.

So verbessern Sie die Barrierefreiheit:

• Legen Sie mit der Option Marker3DInteractiveElement.title beschreibenden Text für eine Markierung fest.
• Fügen Sie dem Slot header von PopoverElement Inhalte hinzu.
• Vergrößern Sie die Markierungsskala mit der Property PinElement.scale.