-1

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>
maeros
  • 57
  • 4

1 Answers1

1

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.

slugolicious
  • 15,824
  • 2
  • 29
  • 43
  • Yes exactly. Multiple radio inputs with same name. So do I understand correctly, that if I have have an on-change for those radios (for example, I click one of them and it closes poopup box with these options and reloads the page), then screen reader users have no way of selecting any other than the first radio input? Is there any way to prevent automatic select with arrows? (and making it select only when user hits Enter for example) – maeros May 06 '22 at 12:27
  • 1
    If you are performing an action such as displaying a dialog when a radio button is selected, that is potentially a WCAG 3.2.2 violation. Selecting radio buttons should only make that button active and (generally) should not perform any other function. It *is* ok to select a radio button and have other form elements appear. – slugolicious May 06 '22 at 21:04