Accessible radio input, triggers onChange event by Space or Enter key

user_4397306 0
Viewed 51

I have been reading the MDN <input type="radio"> element documentation. I want to make accessible radio buttons. So, I want a user to be able to tab through each radio button, and when they press space or enter to trigger the onChange event and make the radio button selected.

Here is my code:

<fieldset role="radiogroup">
    <legend>Type of radiation:</legend>
        <div>
            <label htmlFor="radio1" tabIndex=0}>
            <input type="radio" name="rad" value="1" id="radio1"  
                onChange={() => console.log('test')} />alpha
            </label>
        </div>
        <div>
            <label htmlFor="radio2" tabIndex={0}>
            <input type="radio" name="rad" value="2" id="radio2"  
                onChange={() => console.log('test')} />beta
            </label>
        </div>
        <div>
            <label htmlFor="radio3" tabIndex={0}>
            <input type="radio" name="rad" value="3" id="radio3"  
                onChange={() => console.log('test')} />gamma
        </label>
    </div>
</fieldset>

But it's not working. I can focus the element, but when I press Enter or Space nothing happens.

accessibility html javascript
2 Answers

You should not do this. If you’re already using native input elements, you are fine!

The misunderstanding here is about how to select radio buttons by means of keyboard: It’s the arrow keys.

Users can jump from one group of radio buttons (with the same name) to the next by means of Tab. Selecting a radio button from the group is done by means of arrow keys.

Of course, you cannot unselect a radio button. But if the first one receives focus and none is checked yet, you can check it with Space and Enter.

See Keyboard Interaction for radiogroup on MDN

You already wrapped the group inside a <fieldset> with <legend>, which is great! You have labels associated with the radio buttons. Looks like you’re all set!

Go ahead, try it:

<fieldset role="radiogroup">
  <legend>Type of radiation:</legend>
  <div><label for="radio1"><input type="radio" name="rad" value="1" id="radio1" />alpha</label></div>
  <div><label for="radio2"><input type="radio" name="rad" value="2" id="radio2" />beta</label></div>
  <div><label for="radio3"><input type="radio" name="rad" value="3" id="radio3" />gamma</label></div>
</fieldset>

user_6080420

I dont have enough rep to just add a comment, but have you tried changing tabIndex={0} to tabIndex="0"?

found this here: https://webdesign.tutsplus.com/articles/keyboard-accessibility-tips-using-html-and-css--cms-31966

If you need to use a non-focusable HTML tag for an interactive element for some reason, you can make it focusable with the tabindex="0" attribute. For instance, here’s a turned into a focusable button:

<div role="button" tabindex="0">
    Click me
</div>

The role="button" attribute in the above snippet is an ARIA landmark role. Although keyboard-only users don’t need it, it’s indispensable for screen reader users and visual accessibility.

user_157403180
Related