이 페이지는 Cloud Translation API를 통해 번역되었습니다.

마커에 접근성 기능 추가

클릭 이벤트 처리를 사용 설정하고, 스크린 리더용 설명 텍스트를 추가하고, 마커 크기를 조정하여 마커의 접근성을 높일 수 있습니다.

마커를 클릭할 수 있으면 마커를 사용하여 키보드 및 마우스 입력에 응답할 수 있습니다.
title 옵션에 지정된 텍스트는 스크린 리더에서 읽을 수 있으며 사용자가 마우스 포인터를 마커 위로 가져가면 표시됩니다.
마커의 크기가 커지면 모든 기기(특히 터치 스크린 기기)에서 마커와 상호작용하는 데 필요한 정확도가 줄어들고 접근성이 개선됩니다. 기본 마커는 WCAG AA 최소 크기 표준을 충족하지만, WCAG AAA 대상 크기 표준을 준수하려는 개발자의 경우 마커 크기가 커져야 합니다.

마커 배율을 변경하고 제목 텍스트를 추가하는 방법을 알아보려면 기본 마커 맞춤설정을 참고하세요.

다음 예는 제목 텍스트가 포함되고 1.5배로 설정된 클릭 가능하고 포커스 가능한 마커가 5개 있는 지도를 보여줍니다.

자바스크립트

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

샘플 사용해 보기

JSFiddle.net

키보드를 사용하여 마커를 탐색하려면 다음 단계를 따르세요.

Tab 키를 사용하여 첫 번째 마커에 포커스를 맞춥니다. 동일한 지도에 마커가 여러 개 있는 경우 화살표 키를 사용하여 마커 간에 이동하세요.
마커를 클릭할 수 있는 경우 '클릭'하려면 Enter 키를 누릅니다. 마커에 정보 창이 있는 경우 클릭하거나 Enter 키 또는 스페이스 바를 눌러 정보 창을 열 수 있습니다. 정보 창이 닫히면 포커스가 연결된 마커로 돌아갑니다.
나머지 지도 컨트롤로 계속 이동하려면 Tab을 다시 누르세요.

접근성을 향상하려면 다음 단계를 따르세요.

Marker3DInteractiveElement.title 옵션을 사용하여 마커의 설명 텍스트를 설정합니다.
PopoverElement의 header 슬롯에 콘텐츠를 추가합니다.
PinElement.scale 속성을 사용하여 마커 크기를 늘립니다.