Alt Tags not Showing

rboyd4570-ok

Hello,

I am having an issue with the Alt Tags not showing. Accessibility is set, option to create ALT tags when published is checked, tags are applied.

Only thing I can see when looking at source is the addition of (aria-live="polite") is added and ALT tag is showing nothing.

Does anyone know how to correct this?

Thanks

comalley5856

Could it be Browser related? Works in some but not in others?

wheels

You probably already checked this but make sure Empty Alt Tag is not checked on the properties tab for those objects.

rboyd4570-ok

Thanks Joe, yes the Empty ALT tags is unchecked.

I tried opening in Lectora 17 and publishing, ALT tags appear just fine.

I am assuming it is an error with how 18 publishes.

rboyd4570-ok

I tried opening and publishing the Trivantis Accessibility Template and same issue occurred. ALT tags are removed in replace of aria-label="".

Screen reader reads the button but ALT tags are removed and show alt=""

This is why I advise not using the current version of Lectora.

wheels

This change was implemented for a better experience when using screen-readers.

This was changed for the Lectora Desktop v18.1 release, and for the upcoming Lectora Online release (~Sept 2019)

"Initially hidden text is read when it is shown" is the Feature that went in. When the alt and title (hover text) attribute tags were set the screen readers read the button names three times. Screen-readers work great once we removed the alt and title tags (they read the button name only once).

Hover text is lost, but it is possible to make your own hover text in Lectora if it is absolutely necessary.

Please use this thread to discuss how this change affects you and what you are seeing. Again, the change was done to enhance the screen-reader experience. We do not see this as a bug and ask for your experiences and feedback to help guide any future modifications.

carlfink

@wheels,

Joe, you've just triggered a pet peeve of mine.

DO NOT, NOT, NOT change things silently. Ever. If you're removing a feature (or disabling an underlying HTML capability) do it out loud and don't make your customer do detective work to figure it out. If Lectora is going to override the user and do something different from what it is told (and I'm putting it that way to make it clear how bad an idea I believe that is), then you MUST, MUST, MUST pop up a big, clear, dialog box that says, "Lectora is removing the ALT tag you put into your course because we know better than you." (Yes, I'm doing that on purpose.)

rboyd4570-ok

Agreed, client speaks to me like a child - "You need to include ALT tags you know", "Here's a screenshot of where you can select the box". Makes me look like I don't know what i'm doing, spend a whole work day $$ to figure out "it's a feature".

Would be more apparent if "include ALT tags" was not in the publish settings if they are not going to be included.

wheels

Thanks @CarlFink you make a good point (more later in the post for you). In this case we made a decision to improve a feature. If this does not improve your published content please help us understand your experience. This change provided what we perceived as a better experience for the screen-readers and environments we test with.

It also allowed for a frequently requested feature to be implemented (reading initially hidden text from text blocks, buttons, and shapes when shown).

We request your feedback by telling us how this change:
a) breaks your content or your content's compliance
b) provides a less preferable experience
c) causes you unwanted rework

We appreciate your feedback and help in improving Lectora. And Carl, we are working on some in application guides that will notify users that something has changed. In this case we really should notify authors when they load an accessible title that the Aria attributes, Alt tags, and Title tags changed for Text, Buttons and Shapes, I absolutely agree with your pet peeve.

carlfink

Thanks, Joe. The only thing that triggers me more (as a former software product manager myself) is useless error messages like, "The operation failed." I spent many hours forcing our developers to actually tell the end-user what happened and how to do something about it.

carlfink

Now that my software designer mindset is active again: to disable the ALT tags is to favor usability for the screen-reading audience over usability for the sighted.

Instead, why not have features for both?

Above, you write, "Hover text is lost, but it is possible to make your own hover text in Lectora if it is absolutely necessary."

So, in an accessible title, have Lectora actually pop up a dialog box that says, "In an accessible title, ALT tags are removed because they interfere with screen readers. Would you like Lectora to display your ALT text as hovertext instead? Yes No".

Easy to code and avoids the whole problem, for 99.9% of cases.

wheels

I'm going to review the implementation with the team. I find it hard to believe we couldn't implement the title tag, in another way, or on another DOM element. I also want to see if there is a way to keep the alt tag somehow so to avoid the issue Ryan experienced were people have history with alt tags. We will also run it by the accessibility user group and hopefully get some feedback. Thanks for pointing these problems out.

prg1792

One thing to note is that is that only IE displays alt tags on hover. The actual purpose of an "alt" ("alternative") tag is to be displayed if an image does not load. The "title" tag is specifically for a hover. Many people using IE are used to the alt tag being displayed on hover, so when they don't see it , they assume there is no alt tag. But that is not necessarily the case; it may be there but not visible on hover, like in Chrome or Firefox. Support for a title tag in Lectora (checkbox on publish?) would be convenient for those used to having others request "alt tags" when they really mean title tags on hover.

See the following link for alt vs title (not an endorsement of this site; it just succinctly explained the issue):

https://www.computerhope.com/issues/ch001076.htm

That said, completely removing alt tags in favor of aria-labels would not satisfy the requirement of having "alternative" text should an image not load, or if a user were using a text-only browser, as some in the accessibility community do.

I just did a quick test using v18.1.2. When I turn off the images in the IE browser, I do see the alt text for my main content image, so that's correct. However, I do not see the alt text for any of the image buttons I've used or transparent buttons or for any controls in the audio play bar. That should be corrected. Alt text displays properly for images and buttons using v16.2.2 when images are turned off, but not for the audio Play and Mute buttons.

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.)

mspencer-2813

@prg1792, I tried your work-around but it didn't work for me. Perhaps I misunderstood Step 3. Can you clarify how exactly I should attach the js file to my title?

In response to this thread in general:

I really hope Trivantis reinstates the alt-text-as-hover-text in the next update. Or at least give us the ability to designate the title text as alt text so that it will show up in the hover text.

In a course originally developed in Lectora 17, I relied on the hover text as a keyboard-tabbable alternative to image button labels that appeared On Mouse Enter and disappeared On Mouse Exit (since these actions aren't keyboard-accessible). The hover text alternative benefited sighted keyboard users who can't use a mouse.

I'm in the process of making a few minor updates to the course. When I republished it in Lectora 18 (to use the HTML5-only option to ensure no Flash), the hover text disappeared.

While I certainly appreciate Trivantis' efforts to improve compatibility with screen readers, please keep sighted keyboard users in mind as well.

prg1792

Hi, Monica (@mspencer.2813)

To attach the JS file to your title, perform the following steps:

1. Select the Insert ribbon.
2. Way over on the right, select Attachment.
3. A window will open. Navigate to the folder where you saved your new JavaScript file.
4. Select the file.
5. Select Open.

The JavaScript file is now attached to your title. You can verify this by selecting the Tools ribbon, then Resources. The file should be listed under Attachments/Other.

When a file is attached to a title, it is copied into the root folder of the published files each time you publish. If it is not attached, it is not copied into this folder, and you will get an error message for any corresponding JavaScript calls.

Hope this helps.

prg1792

@mspencer.2813

I just published my test title in v18.2.1 using the code I had posted. It is not working with this version. I'll have to dig a bit to see what changed since I posted my example. Sorry!

UPDATE: Be sure that any smart quotes are replaced with straight quotes both in the code of your new JavaScript file and in the HTML Extension text. That's what caused my recent attempt to fail.

mspencer-2813

@prg1792

Thank you, Ann! I replaced the smart quotes with straight quotes in both the js file and the HTML extension text and it WORKED!!!

Thanks for the script, explanations, clarification, and quick response. It was all very helpful!

prg1792

You're welcome :-) Glad that worked for you!

mspencer-2813

*Sigh* This script doesn't seem to work anymore for Lectora 19, based on preliminary testing of another course in SCORM Cloud.

It would be nice not to scour the Internet for work-arounds every time there's a Lectora update.

Does anyone have a fix for the ARIA text or ALT text not showing on keyboard tab for sighted users in Lectora 19?

prg1792

Hi Monica @mspencer-2813

I manually inserted the code into a course I published with the Lectora v19 Beta. I'll add this disclaimer: since I did not publish using the official v19 application, I cannot say with 100% confidence that my results reflect that tool.

That said, I can see that the code is still correctly taking the alt value (for images) and the aria-label value (for buttons) and setting the title attribute, which is visible on mouse-over. I looked in IE 11, Chrome, and Firefox using the Developer Tools F12 option for each and see that this change has been made.

I am able to see a "tooltip" when moving the mouse over a button or image in all three of these browsers.

But, I only saw the "tooltip" on keyboard focus using IE 11. Chrome and Firefox do not display the tooltip on keyboard focus.

Looking online, I see that the lack of support for displaying the title attribute on keyboard focus is listed as bug for Chromium, with no resolution: https://bugs.chromium.org/p/chromium/issues/detail?id=829352

And another site explains why this makes the title attribute unreliable: https://developer.yoast.com/blog/dont-rely-title-attribute/

So, I'm guessing that what you are experiencing is not related to Lectora v19, but the browser. Could you confirm if you see the tooltips in IE 11 or Edge?

mspencer-2813

The browser I need it to work in is IE 11 (yay, government). That's where it worked before.

EDIT:

I'll try entering it manually and see if that fixes the issue.

prg1792

Ok. Here are a couple tests for you to try:

1. When running in SCORM Cloud in IE 11, do the tooltips appear when you mouse-over?
2. Within Lectora, if you preview a page in the IE 11 browser, do you see the tooltips on mouse-over and keyboard focus?
3. If you publish the course as just "Web" instead of "SCORM", do you see the tooltips on mouse-over and keyboard focus?

If the first answer is "no" but the other answers are "yes", then it's possible that the Lectora v19 SCORM wrapper has changed in some way preventing the code from executing when deployed as SCORM.

mspencer-2813

OK, never mind. I just did it again and it works!

I think I screwed something up by adding a second HTML extension by mistake. Maybe they canceled each other out. So I deleted it and now it's working again.

Thank you again for your quick responses and insights. I do appreciate it!

prg1792

Great to hear that you got it working again :-)

I will add that it is important to always test any custom code whenever there is a Lectora update. You never know what an update will do.

comalley5856

By request of one of our group members, this topic has been added to the agenda for the October 29, 2020 Lectora Accessibility User Group open discussion.

If the folks who participated in this string - or anyone else interested, would like to join that discussion, please go to www.thelaug.org to add your name to my email distribution list. This will ensure you receive an invitation to our meeting (which takes place the last Thursday of every month (Jan-Oct) from 10:00 - 11:15 Central).