Do projects created with StoryMap JS meet web accessibility standards and Section 508?

[jskirby3]

For example, I don't see an easy way to add alt-text to images I've uploaded. I hope it's something obvious I just goofed on and didn't notice.

[pmacMaps]

I have a theory about how the alt attribute can be added within the js/media/types/VOC.Media.Image.js file. Setting up the developer environment to test this theory is beyond my ability, so I'll share my proposed code in case someone wants to test it.

In my opinion, adding an alt option to the JSON file under the media group would also be idea. It can be set to null by default, but provides an easy way for developers to add in alt text. My theory will use the headline property. I may be accessing headline incorrectly.

The added code goes between this._el.content_item.src = this.data.url; and this.onLoaded();

if (!this.data.headline) {
   this._el.content_item.alt = "";
} else {
   this._el.content_item.alt = this.data.headline;
 }

[pmacMaps]

I've also been playing around with the following function on the change event. I still need a helper function for the first slide when the map loads.

var storymap_data = 'a JSON file containing data';

var storymap_options = {};

var storymap = new VCO.StoryMap('storyMap', storymap_data, storymap_options);

storymap.on("change", function() {
    // counter for slide number
    var currentSlide = this.current_slide;
    // image element for current slide
    var slideImage = document.getElementsByClassName('vco-media-image')[currentSlide];
    // text content for current slide heading
    var headlineText = document.getElementsByClassName('vco-headline')[currentSlide].textContent;
    // set alt text to headline text 
    slideImage.alt = headlineText;      
});

[ghost]

@pmacMaps i'll take a look at it what you've commented. also, if you're interested, you can now set up a developer environment by doing the following the steps on the TLDR and potentially here