Question

我们如何向Google地图图块添加空白的alt标记（由v3 api生成），以便它们不会降低我们的可访问性分数？

Answer 1

不能让这个1去

您可以使用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";
      }
    });
 });

Answer 2

目前尚不清楚，从实际的可访问性角度来看，将ALT添加到本质上是图形化的内容会有很大帮助。退后一步：

您使用什么工具来生成此分数？
您是否关注某些强制合规性原因所产生的工具生成得分，或者这是实际可以访问您的网页的真正目标吗？
你是如何使用瓷砖的？这是你自己拥有的一组页面吗？

这里的目标确实应该是可访问性，而不是通过工具衡量的合规性;工具应该有助于完成这项任务，但不幸的是，很多情况下工具会衡量对某些规则的遵守情况，但无法衡量可访问性本身。例如，工具可以确定图像是否具有ALT属性;但ALT属性必须存在且有意义才能实际访问图像。因此，请尝试考虑更大的图景 - 让用户满意 - 而不仅仅是试图让工具保持高兴。

如果您在自己的一组页面中显示这些图块，最好的选择可能是在页面上的其他位置显示文字，以解释图像中发生的情况。例如，如果它是提供某个地方路线的地图，请提供文字说明。

这里的正确解决方案实际上取决于您想要使用图像的内容 - 您能否提供有关较大项目的详细信息？

一旦你有了一些可用的图形拼贴替代品，处理实际IMG拼贴的最佳选择可能是设置alt =＆＃34;＆＃34;，它告诉屏幕阅读器忽略他们彻底;这可能是这里最好的行动方式，因为屏幕阅读器已经读完了＆＃34;图像，图像，图像...＆＃34;不会特别有用。

-

假设您在http://berkeley.edu/map/googlemap/专门谈论伯克利校园地图 - 这是一个有趣的案例。左边有建筑物清单，页面主要部分有地图。单击某个建筑物，会出现一个带有弹出窗口的图钉，其中包含一些信息和更多链接，单击该链接会显示更多详细信息的灯箱。

我在这里看到的一个问题是，当屏幕阅读器用户点击左侧的其中一个链接时，他们可能不知道弹出窗口出现了页面上其他位置的更多信息。即使你知道那里有一个弹出窗口，你也必须浏览中间链接以获取其内容，这有点尴尬。（用alt =＆＃34隐藏图像;＆＃34;至少意味着他们不必浏览所有这些图像。）

也许将焦点转移到弹出窗口会有所帮助（屏幕阅读器通常会关注焦点），但如果弹出窗口由Google Maps代码管理，则可能会很棘手。这可能需要使用真实的屏幕阅读器进行测试，例如PC上的免费NVDA或Mac上的VoiceOver - 甚至更好，通过真实的屏幕阅读器用户进行验证！

此时，我们现在深入了解该特定页面的细节，这可能超出了这个答案的范围，但它确实有助于说明对于这样的情况，你必须查看页面级问题（校园建筑目录）的可访问性，而不是仅仅孤立地查看一个有问题的组件（IMG元素）。

Answer 3

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

就“更易于访问”的Google地图而言，请看一下我创建的"accessible" version of Google maps。它不仅仅是为图像切片添加alt属性。它还为可聚焦元素添加了焦点样式（尽管是丑陋的样式），并为缺少这些样式的控件添加了可访问的名称。请注意，它取决于语言，我的实现仅适用于英语和德语。

Answer 4

我最终使用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";
  });
});

google-map tiles缺少alt标记导致可访问性得分较低

4 个答案: