March 12, 2019 at 8:36 am #419896
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?March 12, 2019 at 9:46 am #419925
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?March 12, 2019 at 11:33 am #419943
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.March 12, 2019 at 12:14 pm #419947
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.March 12, 2019 at 12:22 pm #419949
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,March 12, 2019 at 12:35 pm #419953
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:
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:March 12, 2019 at 12:47 pm #419963
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,March 13, 2019 at 5:07 am #420002
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 youMarch 13, 2019 at 7:36 am #420005
Math NotermansMember124 pts@mnotermans5114
A button without an action is nothing more then an image.. treat it as that, or remove it.March 13, 2019 at 8:16 am #420008
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:March 13, 2019 at 10:33 am #420015
Yes, you can use aria-hidden. You would add it using the same method I explained above to add the aria-label.
This will hide the element from screen readers but leave it visible for sighted users.March 13, 2019 at 11:44 am #420022
Perfect! Thank you Darrel. Let me try it and will come back to you.March 13, 2019 at 12:41 pm #420024
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,March 13, 2019 at 4:18 pm #420058
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 addMarch 13, 2019 at 8:01 pm #420072
- Download the attached zip that contains the newest full version of jQuery (compressed minified version 3.3.1).
- Unzip the file to a location where you will browse to in a minute (desktop works fine).
- In Lectora, with your project open and your title selected, insert an HTML Extension (Insert tab – Add Web Object panel).
- That will add the extension to your root. With it selected choose the Properties tab or Double click the HTML Extension.
- In the first panel make sure the name is HTML Extension, for Type select Header Scripting from drop down.
- 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.
You must be logged in to reply to this topic.