Lectora 21 - Disabled text buttons announce twice by screen reader

@trog I made a couple simple courses with some disabled buttons, one with v19.0.4 and the other with v21.0.3. I listened with JAWS in Chrome and in IE11 but I am not hearing any differences.

Would it be possible for you to attach your project, or a stripped down version of it so that I can try that?

Just thought I'd share my workaround.

After further investigation it seems like the aria attributes in the html are not the same in v21 compared to v19.

To suppress the 2nd announcement of the disabled button's text, I ended up writing some JavaScript to re-work the aria attributes and placing it in a Run JS action. It seems to do the trick.

var nodeList = document.querySelectorAll('[id$="btn"]')

nodeList.forEach(node=> { if (node.getAttribute("aria-label") === null undefined (node.children[1].setAttribute("aria-hidden","true"))}})

This script adds an aria-labelledby attribute to any disabled button telling it to use its child span tag within as its text, but only if there isn't already an aria-label attribute within the tag (such as with image buttons). It also then sets an aria-hidden attribute on the child div so that's no longer announced.

The button is still announced "Module 2 button not available" since its disabled.

But it won't then focus on the text inside the button a 2nd time.

Here is a table I did up comparing a disabled text button's html from Lectora 19 and 21 and after the JS fix.

If there is a better way or if you see a problem with my code snippet, lmk.

Hopefully this can be updated in Lectora 21.

Cheers

Trev

@tasiala I made a video of the screen reader in action.

I had to cut out the audio because it wasn't in sync in my capture, but I have the screen reader text visible at the top. You'll see that the enabled Introduction button reads fine, but the subsequent disabled buttons read both the 'button' "Common Threat Scenarios button not availablee" and then the text inside the button. "Common Threat Scenarios"

The screen reader doesn't put the 'button not available" in the Text viewer but it is spoken that way when the orange highlight is focused around the full button. Then the focus goes around the text within the button which is also spoken.

I should add this was originally built in Lectora 19 but we're now testing our courses in L21 for issues.

Let me see if I can prepare a stripped down page.

PS. Yes, you'll also notice that the Status indicators are announced even if there is no graphic for that phase. Perhaps that can be adjusted as well and only announce when the graphic is present.

@tasiala , I got around to preparing a copy for you. I had to fix some various targets on some of the actions when I stripped it down.

Then I wanted to test out the library object in action alone, to make sure the issue was still there with my screen reader. And surprisingly, the issue was gone. It no longer announced both the button text and the text inside ,both in preview or published as SCORM.

I'm going to have to investigate more and just replace those menu layouts, as it now appears to be just pages corrupted in isolation somehow (as you saw in my video) and not a specific Lectora 21 issue.

This specific menu layout was in 3 different courses we have. All had the same issue with disabled buttons on the menu. Perhaps an issue with 18/19 to 21 migration. Just not sure, but this looks promising that I can just rebuild and replace.

Will need to investigate further and swap out the menu page in each course, see if I encounter this anomaly again.

I may have written some completely unnecessary code. lol

Thanks for your time!

@trog I loaded my v19 course into v21 but I still am not hearing the issue you mention. If you are able to give a stripped down page maybe that will help

@tasiala I spoke to soon. I'm still getting the error with the JAWS screen reader announcing the button twice. First as the button and then as the text inside the button. (Only the disabled buttons)

Here is a AWT stripped down to just that specific menu with disabled buttons. I tested it just before sending; still has the flaw. If I preview in browser and then listen to the menu page with the screen reader.

Cheers

Trev

@trog I published the course and listened with JAWS. For each of the buttons, including the Introduction button, I hear the button name (followed by unavailable if it unavailable), and then the name of the Status Indicator that is included in the group the button is in.

Loading the project I do get 2 Resource not found messages, one for extern\jquery.knob.min.js and the other for extern\alt_tag_replacement.js. Can you provide those files? I can try again and see if I get the error, or you could try without them and see if it reads correctly