Kinsting Lab - Highlighting a Radio Button Group
Problem:
Highlighting form fields is generally a straightforward process. Most form elements behave nicely in terms of their receiving focus and showing a corresponding highlight. However, when it comes to the focus & highlighting of a radio button group - especially when that radio button group contains no "initially selected" radio button - there exists a real problem.
First let's take a look at a small form, demonstrating DEFAULT BEHAVIOR and showing a combination of textfields and a radio button group as described above. Note that neither the Male nor Female radio button is selected.
Clicking upon the "First name" textfield and then tabbing down through the other fields (Go ahead; TRY it.) will show...
  1. The focus proceeds nicely from "First name" to "Last name"
  2. PROBLEM: When the user tabs (down) from "Last name", then only the first ("Male") radio button is highlighted. Since the user is to select from the PAIR of radio buttons, shouldn't they both be highlighted?
  3. PROBLEM: The tab pattern/order is inconsistent from browser to browser. For example, on Chrome the order is: First name, Last name, Male, and Address. However, on Firefox, that order is : First name, Last name, Male, Female and Address
Solution:
Our primary goal here is to have the GROUP of radio buttons highlight. Visually, this would appear as:
Here is our solution form...
Here is my solution HTML...
Here is my solution CSS...
Here is my solution JavaScript...