如何为Google Maps标记图标添加alt/title文本解决无障碍问题

要解决axe DevTools检测到的无障碍问题，你需要给Google地图的每个标记（Marker）添加可访问名称，让屏幕阅读器能识别标记对应的地点。Google Maps JS API提供了专门的无障碍属性，同时也支持传统的title属性，两种方式结合能覆盖更多场景。

方案一：修改locations数组，明确添加纯文本名称 #

先调整你的locations数组，把每个校区的纯文本名称单独作为一个字段，这样更清晰易维护：

var locations = [
  ['Main Campus, Stockbridge Lane', '<h4>Main Campus, Stockbridge Lane</h4>', 53.428737, -2.8593184],
  ['Kirkby Campus', '<h4>Kirkby Campus</h4>', 53.4810983, -2.8934299],
  ['Main Campus, Institute of Advanced Manufacturing and Technology', '<h4>Main Campus, Institute of Advanced Manufacturing and Technology</h4>', 53.423517, -2.861301]
];

然后在创建Marker时，添加accessibilityLabel（专为无障碍设计）和title（鼠标悬停提示）属性：

for (var i = 0; i < locations.length; i++) {  
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][2], locations[i][3]),
    map: map,
    icon: icons[iconCounter],
    accessibilityLabel: locations[i][0], // 屏幕阅读器识别的标签
    title: locations[i][0] // 鼠标悬停显示的提示文本
  });

  markers.push(marker);

  // 保持原有的弹窗点击事件，注意这里要把弹窗内容改成locations[i][1]
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][1]);
      infowindow.open(map, marker);
    }
  })(marker, i));
  
  iconCounter++;
  if(iconCounter >= iconsLength) {
    iconCounter = 0;
  }
}

方案二：直接解析现有HTML获取文本（无需改动数组结构） #

如果不想调整locations数组的结构，可以在循环中解析HTML标签里的纯文本，作为标记的可访问名称：

for (var i = 0; i < locations.length; i++) {  
  // 解析HTML内容，提取纯文本标题
  var campusTitle = new DOMParser().parseFromString(locations[i][0], 'text/html').body.textContent.trim();
  
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon: icons[iconCounter],
    accessibilityLabel: campusTitle,
    title: campusTitle
  });

  markers.push(marker);

  // 原有的弹窗点击事件保持不变
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
  
  iconCounter++;
  if(iconCounter >= iconsLength) {
    iconCounter = 0;
  }
}

说明 #

• accessibilityLabel是Google Maps API专门为无障碍设计的属性，屏幕阅读器会优先读取这个值；
• title属性既可以给视觉用户提供鼠标悬停提示，也能被部分辅助技术识别，两者结合能更好地覆盖不同用户场景；
• 添加后，axe DevTools的缺失ARIA可访问名称问题会被修复，同时提升了网站的无障碍体验。

内容的提问来源于stack exchange，提问作者Samantha Ashton