如何使 Leaflet 平铺层可访问答案

【问题标题】：How to make Leaflet tile layers accessible如何使 Leaflet 平铺层可访问
【发布时间】：2014-11-04 21:33:46
【问题描述】：

如何向切片图层添加“alt”标签，并提高应用程序的可访问性得分，尤其是 Esri.WorldGrayCanvas，但在 http://leaflet-extras.github.io/leaflet-providers/preview/ 找到的任何切片?

【问题讨论】：

标签： map accessibility leaflet tiles alt

【解决方案1】：

您可以在加载时通过挂钩到 tileload 事件来操作平铺图像：

esriGray.on('tileload', function (tileEvent) {
    tileEvent.tile.setAttribute('alt', 'Map tile image');
});

这样图像总是有 alt 标签，即使在缩放/平移之后，您也不必使用 Jquery。

【讨论】：

谢谢你，iH8！我稍微编辑了代码以包含 tileloadstart。这是更新：esriGray.on('tileload, tileloadstart', function (tileEvent) { tileEvent.tile.setAttribute('alt', 'Map tile image'); });
没问题，我们随时欢迎您。但是您能解释一下为什么还要在 tileloadstart 事件中设置 alt 属性吗？对我来说似乎有点多余......
好点，它们是多余的。 tileload 事件似乎仅适用于初始图块加载，但 tileloadstart 事件涵盖了初始加载和后续图块加载。所以用 'tileloadstart' 替换你的初始代码就可以了。

【解决方案2】：

下面列出了在地图加载时可访问的图块的解决方案，但是目前尚未确定放大/缩小时图块的解决方案未。

注意：由于下面的解决方案引用了 jQuery，请确保您在代码中引用了 jQuery 的 JavaScript。

设置底图变量后，例如：

var esriGray = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
    attribution: 'Map Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ',
    maxZoom: 16
});

添加一个 jQuery 文档就绪函数，为 Leaflet 平铺窗格提供一个属性。接下来触发指示每个地图瓦片将由“地图瓦片图像”及其索引号引用的函数。

注意：此解决方案仅适用于应用程序加载时，并且一旦用户缩放/平移替代图像就会消失。

$(document).on('ready', function(){
    addMapTileAttr('.leaflet-tile-pane img')
});

function addMapTileAttr(styleClass) {
    var selector = $(styleClass);
    selector.each(
    function(index) {
        $(this).attr('alt',"Map tile image " + index);
    });
}

【讨论】：