How to Change HTML name for Objects

tmichael9734
tmichael9734 Community Member Posts: 119 ☆ Roadie ☆
Hi Everyone,

I know this topic has been around for a while 2 or 3 years ago but could not find any solution to this question: how do I change the HTML name to objects in Lectora?  The 508 returns my project with a comment that their devices read only button1234 and they need me to replace it with a meaningful button name.  I used the "Name" field for buttons but still this doesn't meet the requirements.  Please note that my project is complete and ready to be posted on the LMS but it should get the 508 clearance first.  What can I do?

Any advice?
«1

Comments

  • klaatu
    klaatu Community Member Posts: 988
    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?
  • tmichael9734
    tmichael9734 Community Member Posts: 119 ☆ Roadie ☆
    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.
  • tea
    tea Community Member Posts: 128
    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.
  • tmichael9734
    tmichael9734 Community Member Posts: 119 ☆ Roadie ☆
    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,

     
  • klaatu
    klaatu Community Member Posts: 988
    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.
  • tmichael9734
    tmichael9734 Community Member Posts: 119 ☆ Roadie ☆
    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,
  • tmichael9734
    tmichael9734 Community Member Posts: 119 ☆ Roadie ☆
    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
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    A button without an action is nothing more then an image.. treat it as that, or remove it.
  • tmichael9734
    tmichael9734 Community Member Posts: 119 ☆ Roadie ☆
    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?

     
  • klaatu
    klaatu Community Member Posts: 988
    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.
  • tmichael9734
    tmichael9734 Community Member Posts: 119 ☆ Roadie ☆
    Perfect! Thank you Darrel.  Let me try it and will come back to you.
  • tmichael9734
    tmichael9734 Community Member Posts: 119 ☆ Roadie ☆
    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,
  • tea
    tea Community Member Posts: 128
    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

     
  • klaatu
    klaatu Community Member Posts: 988
    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.
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    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
  • tmichael9734
    tmichael9734 Community Member Posts: 119 ☆ Roadie ☆
    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?
  • tmichael9734
    tmichael9734 Community Member Posts: 119 ☆ Roadie ☆
    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.
  • wheels
    wheels Florida USACommunity Member, Administrator, Moderator, Rockstar Manager Posts: 575 eLearning ROCKSTAR Admin Team
    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
  • klaatu
    klaatu Community Member Posts: 988
    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.
  • tmichael9734
    tmichael9734 Community Member Posts: 119 ☆ Roadie ☆
    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.
  • tmichael9734
    tmichael9734 Community Member Posts: 119 ☆ Roadie ☆
    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?

     
  • timk
    timk Community Member Posts: 1,199 ♦ Idol ♦
    You should be aware that the html name is a quite important thing in the published output, as it makes the id of the <div> 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.
  • tmichael9734
    tmichael9734 Community Member Posts: 119 ☆ Roadie ☆
    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?
  • timk
    timk Community Member Posts: 1,199 ♦ Idol ♦
    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("%HTMLNAME%btn").setAttribute("aria-label", "Enter your Text for the aria-label");

    This way the aria-label is added to the <button> 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..."
  • lsilver
    lsilver Community Member Posts: 80
    @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.