Script to Add "Alt Tags" to Images Uploaded via OA Form

Adding "Alt Tags", is a crucial piece for providing for better accessibility to any website.  An issue with the current (June, 12th, 2021) exhibitor template setup is that this can easily be done if you are hard-coding short codes (<div class="sample-img-div" alt="[[alt-tag]]"></div>), but how do you do it, when the client is uploading their own images via an Organization Administration Reg Form?  

Here's a fairly easy hack:

1. First wrap the desired image in an Additional html container.  In this case I used a simple div,   (<div class="image_1 image-data" data-alt="[[alt_tag_1]]"> ) with an easily identifiable class name that will match the target <img>  which is pulling in the slug "exhibitor_image_1".  The Data attribute I used to pull the alt tag from an additional custom field set in the back end is "data-alt", but it could be data-feed-me-a-banana, or whatever you like.  I figured the data-alt nomenclature would be easier to read in case another dev needs to adjust this later. 

2. Write a script that will add the desired tag to the correct img tag. There are multiple ways to go about this, but in interest of time I used jQuery to look at each image tag, grab our desired alt tag value from the data attribute and use the .attr() method to assign it to the img's alt tag.  

//-- wait until page is loaded

$(document).ready(function(){

//-- have the script target each exhibitor image

$('.exhibitorImage').each(function(){

//-- use the $(this) keyword to grab the data attribute value from the div we just wrapped around our img tag (the "closest" element with matching .image-data class name), and assign it to a const variable called "tag" (this will avoid re-assignment errors as "const" variable assignment denotes a constant, or value that cannot be re-assigned).

const tag = $(this).closest('.image-data').attr('data-alt');

//-- assign the value being held in our "tag" variable to the desired (closest) <img> element, which in our case has the class name "exhibitorImage". 

$(this).closest('.exhibitorImage').attr('alt', tag)

});

});

** note ** this script can be added to the footer of Web Access Domains, or in the actual exhibitor template. Here, I placed it after the closing </div> tags of the images that it is being applied to.