Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Add Alt Attribute to Images in Esri Map Tour StoryMap (Classic Series). Code is supported in IE11
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
// 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
}); // 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 >')[0].innerHTML;
// set alt attribute text
setAltText(titleText, featImg);
}); // end maptour-point-change-after
Copy link

pmacMaps commented Oct 22, 2019

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


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment