Providing the most accessible websites and browser-based applications should be a goal for every web developer. Most of my work is with web mapping applications. And while I consider myself relatively new to web accessibility, I am taking steps on improving this within my organization.
In this article, I wanted to share my solution for adding the alt attribute for img elements for the Esri Map Tour StoryMap application. I have provided code samples at the end of the article. In my experience working with Esri templates, it seems they often overlook the alt attribute for img elements.
According to the Mozilla Developer Network, the img element “embeds an image into the document.” The alt attribute “holds a text description of the image, which isn’t mandatory but is incredibly useful for accessibility.”
The Map Tour application blends a background webmap with a content block. The content block contains the image, title, and descriptive text for each stop along a tour. There is a carousel of all tour stops. This carousel contains images. And within the content block, there is an option to enlarge the image in a pop-out modal. Users can move back and forth among the various stops along the tour. By default, none of these image elements contain the alt attribute.
I started by creating a function that could be called during the maptour-ready hook and maptour-point-change-after hook. These hooks represent when the application is ready, and when a tour stop changes. The function takes two parameters: 1) a string representing the title of the tour stop; and 2) the image element the alt text will be set on. I set default text for the alt attribute. If the title parameter is true, I combine that text with the default text. If it is false, I use the default text to set the alt attribute.
During the maptour-ready hook, I loop over each of the images in the carousel and set the alt attribute. I use the maptour-point-change-after hook to add the alt attribute for the image in the content block.
I did struggle with the image element in the pop-out modal. Due to how the content was created and destroyed, my normal tricks would not work. I learned about the MutationObserver. This allow you to “watch for changes being made to the DOM tree[,]” which is exactly what I needed to do.
I’m sure my solution could use improvements in how I implemented the MutationObserver. I constructed it in the maptour-ready hook. Whenever the “button” is pressed on the image in the content block to expand the image into the modal, it fires the function to set the alt attribute. It does this, but also fires a console error. I have no idea why.
ES6 Sample Code
Internet Explorer 11 Compatible Code