Java script, tab order and read only fields (accessible form)
I am creating a PDF form for my employer. The form has certain points where your answer decides whether you continue or stop, using JavaScript to turn on/off read only status for certain fields.
The first two decision points are dropdown lists:
- You can move to the next question if you answer "No" to the first dropdown; if "Yes", the form is complete (all other fields set to read only).
- If you answer "Yes" to the second dropdown, you can proceed to answer the next two questions. If "No", form is complete (all other fields are read only).
The third decision point is a text/number field. The decision is based on a calculation:
- If the amount in the Family_adjusted_gross_income field is higher than the Exclusion_amount field, the rest of the fields open (read only switched off) for you to complete.
The Exclusion_amount is calculated based on family size.
By default, all fields after the first dropdown are read-only. Based on your answer, the next question(s) unlock (read only switched off) or remain locked/read only) This continues step by step.
We are a state agency serving people with disabilities, and many of our staff also have disabilities. Accessibility—especially keyboard accessibility—is critical for us. Our resources are limited. We are in the process of working with a contractor for a new online case management system that would be able to handle this and other forms as HTML forms, but we are still a year+ out from that becoming live.
The issue:
The form works fine for me on two different computers running Windows 10 and the most recent version of Acrobat DC Pro. But some of my co-workers, who also use Windows 10 and the latest Acrobat DC Pro, are experiencing problems.
They select an answer in the first dropdown and press Tab to move to the next field.
The next field unlocks as expected, but the cursor jumps back to the first field instead of moving forward.
If they press Enter before pressing Tab, it works correctly.
The problem also happens at the third decision point (a text field), even though other text fields work fine. Meaning that in this text field only, they have to press enter after entering the dollar amount BEFORE tabbing to the next field, or it will jump back to the beginning of the form. No other text fields require them to press enter, they can just type the response and press tab to move to the next field.
I believe the issue is related to the JavaScript (JS) controlling read-only status, but I don't know how to fix it.
During testing with multiple staff, about half of my coworkers can tab through the form with no issue, while the other half experience the issue(s) described above.
Here’s a simplified version of the JavaScript that I am using to switch on/off the read-only status (adapted from a script I found on this forum:
switch(event.value) {
case "Yes":
this.getField("Receives_non_exempt_services").readonly = true;
// Repeat this for all read-only fields
case "No":
this.getField("Receives_non_exempt_services").readonly = false;
// the other fields past this remain read-only
default:
this.getField("Receives_non_exempt_services").readonly = true;
// Repeat for all read-only fields (default state)
}
I can’t find a solution that doesn’t cause other issues, and I don’t know why it only affects some computers, but others have no issue. What I need is a solution that will reliably allow all users to tab through the fields without focus jumping back to the top of the form.
At first, I thought I could just tell them to use Enter to select the option in the dropdowns before tabbing to the next field, but then I noticed that it also affects the text field that uses the JS too.
If anyone can help, I’m happy to share the form through PM. Thanks!
AdChoices