Add images or buttons to forms
June 13, 2017 12:00 AM
I am creating a page that is a combination of form elements and hint buttons so that learners can complete the task on their own and get hints if needed. In working with a sight impaired learner, the best practice would be to use hint-form order for the page. As a result, in order to provide best practice for the screen reader user, I have to create a group to get the appropriate tab and reading order. I did try selecting all of the buttons and form elements and dropping them into the form, but Lectora "ungrouped" the buttons
Given the way forms work as a whole, this could be challenging, but worth the work, I think, to add to Lectora's already strong industry positioning for accessible options.
Discussion (4)
Hey Jason, hope all is well. This might save you some time ;-)
document.getElementById("HTML name").tabIndex = *;
Add this to the load of the page in a RunJS. Replace the "HTML name" with the name of the element you want to target. Replace the asterisk with the number in the tab order of your choosing. You can literally dictate the entire tab order with this.
Hope it helps.
DRS
Hi Darrel - Things are (mostly) well. Closing in on my release date and that time off you suggested once it's done :)
I had thought about that, but wasn't going to do it until I was sure I was going to have time to create the options. I'm also a little leery of forcing tab order, because there are other buttons that need to come before the form itself. If it was a small form and simpler page, absolutely. Unfortunately, it means tab indexing for 30 or so items.
If I wasn't focused on accessibility, it would be a moot point, and I could group them how I want. It just makes the title manager look insane without having the group and the form.
undefined
You can still use form elements without adding them to a form.
I am still using them, drop-downs, entry fields, radio buttons, etc, just not in a "form". It's more about a clean title manager and more easily resetting the form elements. In a form, it's one action; as they are order in the title manager, I'm using a group that has the hint buttons, then the form element. If I want to reset, I have to create an action group to reset each variable and change contents manually. It's just messy, so this is more of an aesthetics suggestion :)
Discussions have been disabled for this post