How to Change HTML name for Objects

Thank you Darrel, that's still extremely helpful. While waiting for Jason, I'll apply your method and send it to the team and hopefully it passes.

Lots of thanks,

Thank you Tea, I'm checking with the 508 team on the screen reader's and browser's names. You drew my attention though to an important tip. Yes, for some buttons which I didn't want the AT device detect, I set the “Empty ALT Tag” property because I thought that may hide the button from them. Is there an alternative route to hide the button from being read by the device?

Many thanks again,

undefined

Hi Therese, I saw your post in the other thread as well. Are you talking about assistive technology? You need the button to be read aloud?

I am not qualified to answer 508 questions, hopefully Jason Dalrymple sees this and chimes in as he is.

With that said, if adding aria-labels to your buttons will satisfy your 508 issue that is fairly easily done. You would need the HTML name of the button (ex. button123) and then if you use jQuery you can put an action on the show of the page with:

$('#button123').attr('aria-label','descriptive name');

This will add the attribute aria-label="descriptive name" to the button HTML.

In the attachment I did this to three buttons. I do not have a screen reader so I cannot test.

Caniuse has WAI-ARIA Accessibility features as only being partially supported on all browsers so again, you need someone who is an expert in assistive technology and 508.

Hi Therese, do you know which screen reader and browser is having issue?

The reader should read the text in the button, if you are using one of our text buttons, or it should read the name of the button as you have it in the properties/left hand pane.

If you have the "Empty ALT Tag" property set that will cause it to read something like "button1234" instead of the name of the button or the text in it.

Thank you Darrel. Yes, I'm talking about the assistive technology. Could you please let me know how to make the button read aloud? I'm new to 508 issues. Many thanks for the help though.

Darrel, when I added an action to page and followed the instructions, the page came out blank. I used the examples in the previous post, but still it rendered a blank page. Did I do something wrong?

Thank you,

Perfect! Thank you Darrel. Let me try it and will come back to you.

Thank you Matt and I'm sorry if I confused you. Please see the attached image for explanation. Actually, the button has an action to show "initially hidden" information. The AT device cannot read the "initially hidden" information even after being called by the button. As a solution, I made two identical sets of the information. One set is displayed by the use of the button for sighted users and the other set is placed at the very top of the Title Explorer and used a font color similar to the background, thus the AT device can read it. The button that shows the information for sighted users has "Empty ALT tag" checked.

Is there a way to hide this button from the AT devices?

undefined

Yes, you can use aria-hidden. You would add it using the same method I explained above to add the aria-label.

$('#button123').attr('aria-hidden','true');

This will hide the element from screen readers but leave it visible for sighted users.

Back to Tea question, the 508 team in my organization used NVDA 2018.4.1 and JAWS 2018 to review my project. It gives them two results for buttons. One result is the device is reading "buttonxxx" and when they click on it, it has no action. The 2nd result is for the buttons that are actionable and the device can read the information provided by clicking on these button. For the first set of buttons, the “Empty ALT Tag” property is checked; while it is not checked for the 2nd set of buttons.

Is there a way to completely hide the non-actionable buttons altogether from the AT device?

Thank you

A button without an action is nothing more then an image.. treat it as that, or remove it.

Hi Therese, I test with both JAWS and NVDA. When there is a button or object with an action both of these readers will read that to the user, either the button name or the HTML (button1234), with our current products.

I test with what development builds, so I haven't made any modifications like those Darrel described. When you get the blank page have you tried checking for js errors in the console? (F12 to load). I'll check here tomorrow to see if Darrel replied to your last post, and I'll try to see if one of our developers may have something to add

undefined

Thank Tea, Darrel and Matt (on the other post) for the time you gave to resolve my issues. Darrel: no apologies. When I didn't find your jQuery, I used the one that was attached in your early post. Perhaps this was the cause of the blank page. I'll try the one you sent me yesterday and will come back to you.

Tea, if I check "initially hidden" property for the button that I want to hide from the screen reader, will that hide the button from the devices? If it works, I can check "initially hidden" and "show" the button when the page loads. What do you think?

To get the best 508 tips and advice... search for posts from Jason Dalrymple ( https://community.trivantis.com/members/jasonadal/ ) He for sure works most with accessibility of all users around here and i do think around his posts and questions you will find the best tips on 508...

Kind regards,

Math

Therese, are you sure you do not also have the initially hidden option selected. I know you are trying a lot of different things. The aria-hidden attribute should only hide the button from screen readers. Joe, above, is talking about token replacement, another great idea.

Therese,

That is a great idea! The button would not be read if it is initially hidden and then shown via an action. You may need a short delay on this show action, maybe add a 0.5 second delay.

In the future this will not be the case, so make sure you set the “Empty ALT Tag” property. Later this year the screen readers will read text, buttons, images, etc that are shown via actions (if they don't have the “Empty ALT Tag” property set). Screen readers will read the shown text because we are changing our code to notify screen readers when this happens, it will be in the next release.

If there is some problem and you want to follow Darrel's excellent aria-hidden advice you can do that without jQuery. Just attach an On Page Show action to the button that does a Run JavaScript action with this JavaScript:

%HTMLNAME%.div.setAttribute('aria-hidden','true');

See screenshot.

- Joe

Therese, I would first try what tea is telling you. She has a much better grasp using assistive technology in Lectora than I do and it seems to be the easiest solution if it works for you. Also, I did you a disservice. Because you mentioned you know JavaScript I forgot to tell you that you have to load jQuery as a header script before using it in your project. I apologize, that was a dumb error on my part putting the horse before the cart. Here's how to add jQuery.

1. Download the attached zip that contains the newest full version of jQuery (compressed minified version 3.3.1).
2. Unzip the file to a location where you will browse to in a minute (desktop works fine).
3. In Lectora, with your project open and your title selected, insert an HTML Extension (Insert tab - Add Web Object panel).
4. That will add the extension to your root. With it selected choose the Properties tab or Double click the HTML Extension.
5. In the first panel make sure the name is HTML Extension, for Type select Header Scripting from drop down.
6. For File select browse for file and navigate to where you unzipped jQuery and select jquery-3.3.1.min.js.

That's it. You know have loaded jQuery to use throughout your project. Let me know if you still get the blank screen. Again, sorry about the oversight.

Darrel,

Thank you much, your formula worked perfectly and the button was hidden. However, it was hidden totally from the screen. I was trying to hide it only from screen readers. So far, I can't figure it out, but I'm glad I learned your formula, thank you.

Joe, thanks a lot for the new method. I removed the JQuery and used your JS on the button, however, it gave me a blank page. Quick clarification, later in the year, will the readers completely skip the buttons that has "Empty ALT tag" set; or will they read the HTML name as it's currently happening?

Darrel: My bad, thanks a lot, you're right! I'd "initially hidden" set. Now that I unchecked it, yes, I can see the button.

I'll send the project to the 508 team and we'll see if it works fine with them. I'll come back to you.

You should be aware that the html name is a quite important thing in the published output, as it makes the id of the undefined the button is in. Changing it would make the button loose a selection of CSS rules that are defined for the id / html name, e.g. its position on the page.

Apart from that the id can easily be changed with javascript. But there's no way to let the user change it.

Thank you Tim. I attached here the message I got from our 508 team on the buttons name, they want me to change the aria label in the code. How do I do that then?

Hi Everyone,

I promised to come back to the forum with the results of testing the formula you kindly provided to hide the elements from the AT devices. Unfortunately, the devices are still reading the hidden elements even when I used "initially hidden". I also tried Darrel's JS with no luck.

I flipped all what I have done and now I showed all the buttons. However, the 508 team is telling me that the buttons' names are missing. They can detect the "html123" name only. I already have names for all buttons.

Lectora Team: is there a way to allow users to change the html name at their end?

Any advice?

undefined

I'll combine some of the ideas from the other posts. Add an action to the button:

On: Page show

Action: Run javascript

Javascript:

getDisplayDocument().getElementById(undefined element. It worked in my test both Seamless and not. This action is copiable to each button, there should be no need to change anything, but the actual text in "Enter your Text..."

@tmichael9734 - You had mentioned in an earlier post that the reason you wanted to hide the buttons in the first place is because they were showing initially hidden objects that would not be read by a screen reader. As Joe mentioned in a previous reply, Lectora 18.1 was just released and now screen readers will in fact be able to recognize and announce objects that were initially hidden, when they are shown. This is a great advancement to Lectora's ability to support more interactive accessible content. Perhaps this new feature will help you out with the button issues you're experiencing as they won't be so necessary any longer? Let us know.

Thank you Laura, I really appreciate your, Joe's and the entire community's help with this. I actually have Lectora 18.0 and I found that the screen reader still read the hidden buttons. I may need to update it today, thanks for alerting me. However, when I tested the project on Lectora 17.1.8, I found that the screen reader still read the initially hidden text when they're displayed. Was the new code in 17.1.8 too? Anyway, you're right, this is a great feature and will save me the time to duplicate and hide the text for the diverse users.

The second issue that you may wish to address is the SCORM published version of the title works perfectly well if LMS is played on IE 11.7xx (any later version more than 11.2xxx). Any version less than IE11.7xx doesn't run it well. I'm not sure if you're aware of this.

Thank you again and thanks for the great Trivantis team and community,

Hi Laura,

I upgraded my Lectora to 18.1 after your comment on screen readers reading the initially hidden objects after being revealed. Today, I was trying to upgrade my version to 18.1.2 but couldn't find the fixes about the hidden objects again. Are the hidden objects are still recognized by the screen readers if they're shown in ver.18.1.2?

thank you,

undefined