Add Alt Attribute to Images in Esri Map Tour StoryMap (Classic Series)

esri-storymap-map-tour-alt-text.js

require(["dojo/topic"], function(topic) {
    // default alt text to apply to images
    const defaultAltText = 'a view along the Yellow Breeches Creek';

    // function to set alt attribute for images
    function setAltText(title,img) {
        // use grouped text if slide title text exists
        if (title) {
            // grouped text
            const groupedAltText = `${defaultAltText}; map tour stop: ${title}`;         
            // set grouped alt text
            img.setAttribute('alt', groupedAltText);
        } else {
            // set default alt text
            img.setAttribute('alt', defaultAltText);
        }
    }

    // The application is ready
    topic.subscribe("maptour-ready", function(){

        // colorbox element - container for modal image
        const colorboxElement = document.getElementById('colorbox');

        // options for mutation observer
        const colorboxObserveOptions = {
            childList: true,            
            subtree: true
        };

        // create mutation observer of colorbox div element
        // console logs an error, but alt text is still set
        const imgModalObserver = new MutationObserver(function() {
            // title text
            const titleText = document.getElementById('cboxTitle').innerHTML;
            // img element
            const imgElement  = document.querySelectorAll('div#cboxLoadedContent > img.cboxPhoto')[0];
            // set the alt text attribute
            setAltText(titleText,imgElement);
        });

        // run observe method
        imgModalObserver.observe(colorboxElement, colorboxObserveOptions);

        // element containing thumbnail images
        const thumbImgContainer = document.querySelectorAll('div.carousel-item-div > span');

        // loop through span elements and add alt attribute to images        
        thumbImgContainer.forEach(function(element) {            
            // child img element - adding alt attribute to this
            const imgElement = element.getElementsByTagName('img')[0];
            
            // next sibling element - div with name of tour stop text
            const siblingElementText = element.nextElementSibling.innerHTML;
            
            // set the alt text attribute
            setAltText(siblingElementText,imgElement);                        
        });       
    }); // end maptour-ready

    // After the new point is displayed
    topic.subscribe("maptour-point-change-after", function(){
        // featured image for map-tour
        const featImg = document.querySelectorAll('div.member-image.current > img')[0];

        // title text for image card
        const titleText = document.querySelectorAll('div#placard > div.name')[0].innerHTML;

        // set alt attribute text
        setAltText(titleText, featImg);       
    }); // end maptour-point-change-after
});

This code represents my attempt to add the alt attribute to the various slide images that load on the Esri Map Tour StoryMap application. I am receptive to people improving my solution.

Here are the places where the slide images appear:

• carousel on the bottom of the map
• within the "featured image" section. This location changes based upon the layout option you're using
• within a pop-out modal

If you need to support Microsoft Internet Explorer, please see this Gist.