Why doesn’t she press the spacebar, but the “label” has a focus check switch in `[for =" "]` attr?

Question

If I have the following html when I press the spacebar while the shortcut has focus, why is the radio not related to validation?

<input type="radio" name="first-radio" id="first-radio-id">
<label for="first-radio-id" tabindex="1">The first radio</label>

This makes accessibility difficult, is there a workaround other than javascript for this?

Here is a JSFiddle example: https://jsfiddle.net/atwright147/q0t53v78/

Answer 1

Label elements are not designed to receive keyboard focus.

So just delete the attribute tabindexand you can check the radio control with a space when this control is focused.

, , CSS :

input:focus + label {
  outline: 1px dotted red;
}

Answer 2

, ( , !) , , .

JavaScript, , , . , , , . .