Question 184207 in Html Question posted in
Some basic documentation can be found here.

Html – multiple radio fieldsets one followed by another do not preserve tabbing order (one of the fieldsets gets skipped)

when having multiple radio fieldset, one followed by another as in for example in
https://www.w3.org/WAI/tutorials/forms/grouping/

one of the fieldsets gets skipped when tabbing
i tried setting separate ids for legends, and fieldsets but behavior does not change tab will only land on one fieldset and skip the next – this tends to happen only of there is a radio fieldset followed by another radio. If we place a text field in between tabbing works as expected

Is there a way to preserve order of tabbing without having to implement custom js functionality?

<fieldset style="border: 1px solid #888; padding: 5px;">
<legend>Output format</legend>
  <div>
    <input type="radio" name="format" id="txt" value="txt" checked=""> <label for="txt">Text file</label>
  </div>
  <div>
    <input type="radio" name="format" id="csv" value="csv"> <label for="csv">CSV file</label>
  </div>
  <div>
    <input type="radio" name="format" id="html" value="HTML"> <label for="html">HTML file</label>
  </div>
</fieldset>
<fieldset style="border: 1px solid #888; padding: 5px;">
<legend>Output format</legend>
  <div>
    <input type="radio" name="format" id="txt" value="txt" checked=""> <label for="txt">Text file</label>
  </div>
  <div>
    <input type="radio" name="format" id="csv" value="csv"> <label for="csv">CSV file</label>
  </div>
  <div>
    <input type="radio" name="format" id="html" value="HTML"> <label for="html">HTML file</label>
  </div>
</fieldset>
Tags:

2

Answers


  1. 0

    Are you saying one of the examples on the W3C site is not working? I tried them all and they were ok.

    In your code example, all the radio buttons are in the same group, name="format" so it will only be one tab stop even though the two sets of radio buttons are in separate fieldsets.

    Change your second set of radio buttons to have name="format2" or something different from the first radio group.

    Login or Signup to reply.
  2. 0

    This is the normal expected behavior. Only the currently selected radio button, or only one radio button of the group button should be focusable in tab order.
    Other ones are usually be reached with arrow keys.

    IN fact, your error here is that the group isn’t the one you expect.

    The group is logically established using the name of the radio button, regardless of fieldsets and legends.
    In your example, since all radio buttons have the same name, they all belong to the same group.

    Try changing the name for the radio buttons of the second group and your problem should be solved.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search