Leaflet.js
Leaflet is an open-source JavaScript library for mobile-friendly interactive maps. It's an easy to use and powerful library, but it does present some accessibility problems. For example, JAWS reads out the alt description for every map tile, which is confusing.
Fortunately, with small adaptations, Leaflet.js maps can be made far more accessible. First, we prevent the screen reader from reading out the alt text for every map tile.
// remove the shadow pane (otherwise each shadow image is read out)
$('.leaflet-shadow-pane').remove();
// prevent screen readers from reading out each map tile
$('.leaflet-tile-container img, .leaflet-shadow-pane img').attr('role','presentation').attr('alt',''); Second, adjust the behaviour of popups so that focus is shifted to the popup content when it is opened, and returned to the icon when it is closed. Also, we can move the close button so that it is focused after the popup content, allowing a screen reader or keyboard user to close the content and return to the map.
map.on('popupopen',function(popup) {
// shift focus to the popup when it opens
$(popup.popup._container).find('.my-popup-content').attr('tabindex','-1').focus();
// move the close button to the end of the popup content so screen readers reach it
// after the main popup content, not before
var close = $(popup.popup._container).find('.leaflet-popup-close-button');
$(popup.popup._container).find('.leaflet-popup-close-button').remove();
close.attr('title','Close item');
$(popup.popup._container).append(close);
});
// return focus to the icon we started from before opening the pop up
map.on('popupclose',function(popup) {
$(popup.popup._source._icon).focus();
}); Chrome doesn't seem to be able to open popups using the enter key, so check if the browser is Chrome and then add role="application" to the map's containing div. (Doing this breaks functionality in Firefox. Still need to check IE.)
if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
$('#goodmap').attr('role','application');
}