Markierungen barrierefrei 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 ist, kann sie auf Tastatur- und Mauseingaben reagieren.
  • Der in der Titeloption angegebene Text 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 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 die Markierungsskala ä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:

JavaScriptCSSHTML
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({
            open: true,
        });
        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({
            position,
            gmpPopoverTargetElement: popover
        });
        interactiveMarker.append(pin);
        map.append(interactiveMarker);
        map.append(popover);
    });
    document.body.append(map);
}
initMap();
index.js
 
/* * 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>
  <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

Testbeispiel

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 optimieren Sie die Barrierefreiheit:

  • Verwenden Sie die Option Marker3DInteractiveElement.title, um beschreibenden Text für eine Markierung festzulegen.
  • Fügen Sie dem header-Slot von PopoverElement Inhalte hinzu.
  • Mit der Property PinElement.scale können Sie die Markierungsskala erhöhen.