By: Laurie Weaver
Member Columnist
Have you been trying to work with Information Technology, but your initiatives and patience grind to a screeching halt? Do the terms they use sound like so much gobbledygook? Do you ever get the sneaking feeling that IT professionals just may, in fact, have come from Mars? If so, you've probably run headlong into some common "GeekSpeak" roadblocks. The aim of this ongoing column is to help forms professionals and technology professionals overcome roadblocks by gaining mutual understanding, vocabulary, and context. So if you need help with specifics, or if you'd just like to know more about a techie topic, email or post any and all questions to Ask Ms. GeekSpeak. This month's topic:"Radio buttons vs. checkboxes in Acroforms "
Dear Ms. GeekSpeak, Why can’t I tab between the individual radio buttons in fillable PDFs?
This is a question I hear quite often. It usually arises when one wishes to design an online form using the proper interface widget to represent an exclusive (one or the other) choice for the user.
Before we move on, let’s go through the meaning of some new GeekSpeak terms. You’ve had a taste of two of them in the above sentence: interface and widget. Another new term is GUI (pronounced “Gooey”). GUI stands for Graphical User Interface. In short, it is a visual way for the user to send commands to the computer. Notice that GUI includes another one of our GeekSpeak terms, interface. In this context, interface means the way the user interacts with the individual graphical element – also known as the widget. Menus, scrollbars, dialog boxes, text fields, and buttons are all examples of GUI widgets. In today’s topic, we will be focusing on two specific GUI widgets, radio buttons and checkboxes.
Consider that radio buttons on a form look different from checkboxes. They have a different GUI. Radio buttons are round and, when clicked, usually have a solid circle inside to indicate selection. Checkboxes are square and typically have check marks or Xs to indicate selection. So what’s the big deal? To a user, the shape and appearance of a GUI widget have implications for the widget’s known behavior. The user expects radio buttons to mean an exclusive choice, and checkboxes to mean the ability to make multiple choices, one choice, or no choice. When we use checkboxes that mimic radio button behavior on forms, we are using a visual interface that is contrary to expected widget behavior. This is usually not recommended for usability.
In that case, you might ask, why not just use radio buttons when we need an exclusive choice on our PDF forms? The answer is that when it comes to PDF forms, especially Acroforms, there are a couple of reasons why form designers might not.
Reason 1: Print design compatibility. Radio buttons are standard online GUI widgets, but in print, we usually don’t have radio buttons (outside of standardized testing with number 2 pencils). Acroform PDFs are closer to their print counterparts than pure online forms in many ways. We would love our users to always fill out and submit our Acroforms, or at least fill out and print them, but the fact is that many users still print out the forms and write on them. Also, individual Acroforms often have a background that came from a designed print file.
Reason 2: Accessibility. Many users like to tab through form field elements and use the space bar to make selections. This isn’t possible with the radio button GUI widget we have available as forms designers with Acroforms (at least not without significant code manipulation – and even then you can cause more problems than you solve).
So this brings us back to the original question, Why can’t I tab between the individual radio buttons in fillable PDFs?”
To better illustrate this, I will give a brief interactive tutorial based on a sample PDF I’ve prepared. To follow along with the tutorial portion, either click this link to open a second browser window or right-click to download the PDF, then open it.
A. Field list: Examine the screenshot of the Fields list displayed in the upper right of the PDF.
We’ve been discussing the term widget, meaning an individual type of GUI object like a menu or a checkbox. But widget in Acroforms also means an individual instance of a like-named field. Notice our sample Fields list for this PDF shows two field instances named “radio” – radio#0 and radio#1. I named each radio button widget “radio”. Acrobat then automatically assigned each field object its index position. The index position is based on field creation order. The first created field of a given name is internally assigned index 0, the next of the same name is index 1, the next is index 2 and so on. This index position is then displayed in the Fields list as a numeral following a number sign after the field name, such as we see with radio#0, radio#1.
Goodness, we are getting geeky now! Why do you need to know this? Because it impacts the tab order for radio buttons only. As the user tabs, if no radio button widget in a set is selected, Acrobat is programmed to go to the radio button widget assigned to index#0 and to skip over all other widgets of the same name. Also, if a radio button widget is selected, Acrobat is programmed to skip over all of the non-selected widgets.
B. Sample 1: Radio buttons
Let’s take a closer look at our radio buttons in Sample 1. The radio button widgets look round. When you open the PDF, neither one is selected. (You can tell because no solid circle is in the middle of either.)
1. Click at the top of the PDF to deselect any field, then type the Tab key three times. You will see the current selection indicator, which looks like a dotted line around each field rectangle, skip over radio widget 1 and go straight to the “Click for ‘radio’ current value” button.
2. Click on the button. It tells you that no widget is selected and that the value of the radio button set is “Off” (the default value for non-selected). Click OK.
3. Click at the top of the PDF again. Now tab 2 times. The current selection indicator should be on widget 0. Let’s say you wish to select this one via keyboard. Go ahead and use the space bar. It works! Oops, you really meant widget 1. Try space bar to deselect. Doesn’t work. Try tabbing to widget 1. Doesn’t work.Try tabbing past the radio buttons and SHIFT tabbing back. Still doesn’t work. How about the arrow keys? If you tab to the radio button set, you can use the arrow keys to change widget selection. Oh, brother!
Here is the accessibility problem with Acroforms radio buttons. One must use the mouse or know about using arrow keys to go between radio button widgets – a procedure not needed for checkbox widgets.
4. To illustrate the differences between fields and widgets, I created some JavaScript functionality you can play with. Since they are named the same, Acrobat considers both “radio” widgets one field object — but it also considers them individual members of that field object. We can programmatically address them as a group or as individuals. To see this in action, hold down your mouse on the button called “radio 0 Green and radio 1 Red,” then let it up again. You will see the border colors of each radio widget change, then go back to black. The code for Mouse Down and for Mouse Up is listed right below the button.
Notice that the Mouse Down code needs two lines, one for each widget because I want each individual widget to have its own border color. I call each widget in the code by its name and by its index position following a period. So radio.0 in my code is talking to radio#0.
For the Mouse Up code, I want all widgets in the set to go back to black, so I don’t need to address them by both name and by index. I can just use the field name for “all” since both widgets have the name “radio.”
C. Sample 2: Checkbox widgets named the same with the same Export Value
1. You can repeat all the experiments with this set and see how it differs from the radio button set. Note, you can tab and use the space bar for every member of the checkbox set all the time. Because both widgets have the same value, selecting one selects both and vice versa.
D. Sample 3: Checkbox widgets that behave as radio buttons
They have the same name but separate Export Values.
1. Play around and see how these all work. Have fun!
There you have it, more about radio widgets than you ever thought you would know! As always, if you’d like to know more about widgets, Acroforms, or any “geeky” word or topic, post here, or email Ask Ms. GeekSpeak.
Posted by: |