I'm trying to be WCAG friendly and have created a group of radio buttons, which, when they receive on-change, trigger action. But when I tried to navigate it by shift arrow, I discovered that it doesn't just focus them, but right away checks them on? Am I missing something here, or is that normal behavior?

Edit:

The code looks like this for example:

<input type="radio" name="month" value="jan">January</input>
<input type="radio" name="month" value="feb">February</input>
<input type="radio" name="month" value="mar">March</input>

CodePudding user response：

You didn't post any code so I'll assume you're using

<input type="radio">

and that you have several of them all with the same name attribute and that each radio button has a properly associated label with them. (Lots of assumptions but we can only guess if you don't post any code.)

When no radio buttons are initially selected, different browsers treat navigation to them differently.

• On Firefox, I can tab to each radio button in the group.
• On Chrome, I can only tab to one radio button in the group.

The tab does not select the radio button. It only moves the focus there.

Once my focus is on a radio button, then the arrow keys perform two behaviors:

1. It moves the focus to the next (or previous) radio button in the group and
2. It selects the radio button.

It sounds like you're asking about #2 behaivor. If so, then what you are seeing is normal behavior.