Explore the community Forums Lectora Web Accessibility Alt Tags not Showing Reply To: Alt Tags not Showing

#429216 Score: 0
Profile photo of Ann Sisco
Ann Sisco
Member
beginner
intermediate
friend finder
wise owl
curious george
contributor
profile
picture perfect
8 pts
@prg1792

@rboyd4570-ok, I have been using some jQuery to augment the HTML output by Lectora v18.1.2. I took a look at setting the title attribute for image and button objects based on their alt and aria-label attributes, respectively. This might be a work-around for you until a formal solution is in place.

1) Open a text editor and copy/paste the following code (comments included to explain what’s going on):

//–need to do this to avoid conflicts
$ = triv$.noConflict();
//–this will fire when the DOM structure loads
$(“document”).ready(function(){
//–a slight delay (1.5 sec) is needed here because the content is drawn dynamically
setTimeout(function() {
//–for every image, set its title to the value of its alt tag
$(“img”).attr(“title”, function(){
return $(this).attr(“alt”);
});
//–for every button, set its title to the value of its aria-label
$(“button”).attr(“title”, function() {
return $(this).attr(“aria-label”);
});
}, 1500);
});

 

2) save as a JavaScript file (.js), like my-custom-code.js

3) attach the JS file to your title so it is included in publishing

4) create an HTML Extension object at the title-level. Set Type to Bottom of file scripting (so that it comes after the jquery include that Lectora inserts automatically. Set File to None.

5) Click Edit and add the following line (change to match your filename):
<script type=”text/javascript” src=”my-custom-code.js”></script>

6) Save and publish your title.

Give it a try. (Sorry, the Forum editor has removed the indentations i included to make the code more readable.)

  • This reply was modified 1 year, 1 month ago by Profile photo of Ann Sisco Ann Sisco.
  • This reply was modified 1 year, 1 month ago by Profile photo of Ann Sisco Ann Sisco.