如何将 Aria 标签添加到 Google 地图标记？

Question

我想在标记对象上添加一个 aria-label。目前，我有一个函数可以加载所有标记，并希望将 aria-label 作为标记的属性放置。目前我在创建标记对象时将 aria 标签作为属性，但我认为这可能是错误的。我如何向标记添加咏叹调标签？

loadLocationMarkers({ lat, lng }, idx) {
    const markerIcon = this.createIcon(idx);

    const markerObj = new google.maps.Marker({
      icon: markerIcon,
      index: idx,
      selected: idx === this.selected,
      map: this.map,
      position: new google.maps.LatLng(lat, lng),
      optimized: false,
      zIndex: this.calculateZIndex(idx),
      'aria-label': 'Location Marker',
    });

    if (markerObj.selected) {
      this.selectedMarkerObj = markerObj;
    }

    markerObj.addListener('click', () => {
      const index = markerObj.get('index');
      this.dispatch(updateSelected(index), this.handleClick(markerObj));
    });
    return markerObj;
  }

Answer 1

使用 title 这将设置 aria-label.

https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerOptions.title

new google.maps.Marker({
      icon: markerIcon,
      index: idx,
      selected: idx === this.selected,
      map: this.map,
      position: new google.maps.LatLng(lat, lng),
      optimized: false,
      zIndex: this.calculateZIndex(idx),
      title: 'Location Marker', // <--- added this
    });

来自 simple-markers sample 和 title="Hello World!" 的输出。

<div
  aria-label="Hello World!"
  role="img"
  tabindex="-1"
  ...
>
  <img
    ...
  /><map
    ><area
      tabindex="-1"
      title="Hello World!"
      ...
  /></map>
</div>

Note: tabindex is -1 since there is no event listener on the marker.

如何将 Aria 标签添加到 Google 地图标记？

How to add an Aria Label to a Google Maps marker?

html

javascript

google-maps

accessibility

wai-aria