As of late 2019, Google Maps does not include alt attributes (blank or otherwise) on the img elements within the fullscreen control button. This is the case for both the Javascript API and Embed implementations. The missing alt attributes cause accessibility audits such as Chrome’s Lighthouse tool to give a lower score for such tests. The following is my exploration of potential fixes for the issue.
Since Google Maps markup is rendered via their API, we don’t have the level of control necessary to add alt attributes to these images directly via HTML. Google Maps has an extensive list of events that fire during different parts of the map life cycle. Unfortunately, there is no event that allows us to directly triggered when the controls layer is rendered. The closest event we can tap into is the tilesloaded event. This event fires when the visible tiles have finished loading. The next thing we need to do is set up a function that will check for the presence of our expected DOM node and add the alt attributes. We will need to call this function using setInterval so the function continues to check every 250ms until the DOM node is present. Finally, we can loop through the images and add the blank alt attributes.
Here is the end result:
// Add alt text to Google Maps images
google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
var gMapControlsCheck = setInterval(function() {
console.log('Checking for Google Maps controls...');
var images = document.querySelectorAll('#map .gm-fullscreen-control img');
if( images.length > 0 ) {
images.forEach(function(image) {
image.alt = '';
});
clearInterval(gMapControlsCheck);
}
}, 250);
});Unfortunately, this fix is still not going to pass the accessibility audit because the alt attribute criteria is evaluated before the JS is able to add the new alt attributes. However, the script above will inject alt attributes for those images that are missing them. So in terms of making your website more accessible this could be a suitable approach.
If you are specifically looking to pass the accessibility audit with a perfect score, you may consider removing the fullscreen control button from the Google Maps UI. You can do this by setting fullscreenControl: false in your map options.