How to make Leaflet tile layers accessible

Question

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/?

Answer 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.

Answer 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);
    });
}