Add Alt Attribute to Images in Esri Map Tour StoryMap (Classic Series). Code is supported in IE11

esri-storymap-map-tour-alt-text-ie11.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 = "".concat(defaultAltText, "; map tour stop: ").concat(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 
        for (let i = 0; i < thumbImgContainer.length; i++) {
            // child img element - adding alt attribute to this
            const imgElement = thumbImgContainer[i].getElementsByTagName('img')[0];

            // next sibling element - div with name of tour stop text
            const siblingElementText = thumbImgContainer[i].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 is a Microsoft Internet Explorer 11 supported version of another Gist.

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