Explore the community Forums Lectora Inspire Tools Questions & Answers How to Change HTML name for Objects

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #419896 Score: 0
    Profile photo of Therese Michael
    Therese Michael
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    @tmichael9734

    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?

    #419925 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    194 pts
    @Klaatu

    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?

    #419943 Score: 0
    Profile photo of Therese Michael
    Therese Michael
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    @tmichael9734

    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.

    #419947 Score: 0
    Profile photo of tea
    tea
    Member
    beginner
    intermediate
    curious george
    profile
    friend finder
    wise owl
    picture perfect
    contributor
    2 pts
    @tea

    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.

    #419949 Score: 0
    Profile photo of Therese Michael
    Therese Michael
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    @tmichael9734

    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,

     

    #419953 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    194 pts
    @Klaatu

    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.

    Attachments:
    1. aria-labels.zip
    #419963 Score: 0
    Profile photo of Therese Michael
    Therese Michael
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    @tmichael9734

    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,

    #420002 Score: 0
    Profile photo of Therese Michael
    Therese Michael
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    @tmichael9734

    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

    #420005 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    111 pts
    @mnotermans5114

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

    #420008 Score: 0
    Profile photo of Therese Michael
    Therese Michael
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    @tmichael9734

    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?

     

    Attachments:
    #420015 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    194 pts
    @Klaatu

    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.

    • This reply was modified 1 week, 4 days ago by Profile photo of Darrel Somoza Darrel Somoza. Reason: printed out html tags
    • This reply was modified 1 week, 4 days ago by Profile photo of Darrel Somoza Darrel Somoza. Reason: whats going on?
    #420022 Score: 0
    Profile photo of Therese Michael
    Therese Michael
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    @tmichael9734

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

    #420024 Score: 0
    Profile photo of Therese Michael
    Therese Michael
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    @tmichael9734

    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,

    #420058 Score: 0
    Profile photo of tea
    tea
    Member
    beginner
    intermediate
    curious george
    profile
    friend finder
    wise owl
    picture perfect
    contributor
    2 pts
    @tea

    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

     

    #420072 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    194 pts
    @Klaatu

    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.

Viewing 15 posts - 1 through 15 (of 21 total)

You must be logged in to reply to this topic.