Google maps google地图平铺缺少alt标记，导致可访问性得分较低

我们如何将空白的alt标记添加到Google地图分幅（由V3API生成）中，以便它们不会降低我们的可访问性分数

无法让这件事过去

可以使用tilesloaded事件，然后使用jQuery在渲染后修改图像

google.maps.event.addListener(this.map, 'tilesloaded', function(evt){
    $(this.getDiv()).find("img").each(function(i, eimg){
      if(!eimg.alt || eimg.alt ===""){
         eimg.alt = "Google Maps Image";
      }
    });
 });

---

从实际的可访问性角度来看，将ALT添加到本质上是图形化的内容中是否会有很大的好处还不清楚。退一步：

• 您使用什么工具生成此分数

• 您是否出于某些强制性法规遵从性的原因而关心工具生成的分数，或者这里的真正目标是使您的页面真正可访问

• 你是如何使用瓷砖的？这是你自己的一套网页吗

这里的目标真的应该是可访问性，而不是通过工具衡量的法规遵从性；工具应该有助于完成这项任务，但不幸的是，在许多情况下，工具衡量的是对某些规则集的遵守情况，但无法衡量可访问性本身。例如，工具可以确定图像是否具有ALT属性；但是ALT属性必须存在并且有意义，这样图像才能被实际访问。因此，试着从更大的角度考虑——让用户满意——而不仅仅是让工具满意

如果要在自己的页面集中显示这些分幅，最好在页面上的其他位置显示文本，以解释图像中的内容。例如，如果它是一张提供某个地方方向的地图，请在旁边提供文本方向

这里的正确解决方案实际上取决于您想要使用图像的目的-您能提供更多关于更大项目的详细信息吗

一旦你有了一些可访问的图形块替代品，处理实际IMG块的最佳选择可能是设置alt=”“，这会告诉屏幕阅读器完全忽略它们；这可能是最好的做法，因为让屏幕阅读器读出“图像，图像，图像…”不会特别有帮助

--

假设你在谈论伯克利校区地图，那是一个有趣的例子。在页面的左边缘有一个建筑物列表，在页面的主要部分有一张地图。单击一个建筑，将显示一个pin，其中包含一些信息和更多链接，单击该更多链接，将显示一个包含更多详细信息的灯箱

我在这里看到的一个问题是，当屏幕阅读器用户单击左侧的一个链接时，他们可能不知道页面其他地方出现了一个包含更多信息的弹出窗口。即使你知道那里有一个弹出窗口，你也必须浏览中间链接才能找到它的内容，这会有点尴尬。（使用alt=”“隐藏图像至少意味着它们不必浏览所有这些图像。）

也许将焦点移到弹出窗口中会有所帮助（屏幕阅读器通常跟随焦点的位置），但如果弹出窗口由谷歌地图代码管理，这可能会很棘手。这可能需要在现实世界的屏幕阅读器上进行测试，比如PC上的免费屏幕阅读器或Mac上的VoiceOver，甚至更好的是，通过现实世界的屏幕阅读器用户进行验证

在这一点上，我们现在深入到这个特定页面的细节，这可能超出了这个答案的范围，但它确实有助于指出，对于这样的情况，您必须从页面级别的问题（校园建筑目录）来查看可访问性，而不仅仅是查看一个有问题的组件（IMG元素）隔离。

我在一家公司工作（Deque Systems）这将创建一个企业扫描引擎，为每个页面和每个项目生成一个可访问性分数。我的建议是仅将其用作一个非常粗略的指南，并将您的工作重点放在确保您的站点真正可访问性上。自动化测试工具只能捕获30%-50%的可访问性问题

---

就“更易访问”的谷歌地图而言，看看我创建的这个。它不仅仅是简单地向图像平铺添加

alt

属性。它还添加了焦点样式（尽管很难看）添加到可聚焦元素，并将可访问的名称添加到缺少这些元素的控件中。请注意，它依赖于语言，并且我的实现仅适用于英语和德语。

我最终使用javascript添加了alt标记。请注意，地图id对于我的特定地图是唯一的

google.maps.event.addListener(this.map, 'tilesloaded', function() {
  var images = document.querySelectorAll('#gmap_canvas1 img');
  images.forEach(function(image) {
    image.alt = "Google Maps Image";
  });
});

---

你说的“可访问性分数”是什么？很好，谢谢，伙计，疯狂谷歌的徽标上没有alt标记！因为这些图像用于演示目的，所以可以设置为空字符串。否则，屏幕阅读器会读出每一个：“谷歌地图图像，谷歌地图图像…”