How to make Leaflet tile layers accessible

女生的网名这么多〃 提交于 2019-12-10 20:08:16

问题


How can you add an 'alt' tag to tile layers, and raise the accessibility score of an application, in particular to the Esri.WorldGrayCanvas, but any of the tiles found at http://leaflet-extras.github.io/leaflet-providers/preview/?


回答1:


You could manipulate the tile images when they load by hooking into the tileload event:

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

That way the images always have the alt tag, even after zoom/pan and you don't have to use Jquery.




回答2:


A solution for the tiles to be accessible on the map load is listed below, however a solution for the tiles when zooming in/out has not been identified at this time.

Note: Since the solution below references jQuery, ensure you are referencing jQuery's JavaScript in your code.

After setting the basemap variable, e.g.:

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

Add a jQuery document ready function giving the Leaflet tile panes an attribute. Next trigger the function indicating that each map tiles will be referenced by 'Map tile image' and its index number.

Note: This solution only applies when the application loads and as soon as a user zooms/pans the alternative images will disappear.

$(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);
    });
}


来源:https://stackoverflow.com/questions/26745454/how-to-make-leaflet-tile-layers-accessible

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!