Radio group is not keyboard operable

Radio group is not keyboard operable — rule summary

Field	Value
Rule code	Manual_RadioKeyboard_Inoperable
WCAG conformance level	A
WCAG success criterion	2.1.1 Keyboard
Must be fixed at source	No

Description

We detected a radio button that cannot be operated using a keyboard. Radio buttons must be keyboard accessible to ensure that users who cannot use a mouse can interact with them. Keyboard accessibility is essential for users with motor disabilities, visual impairments, and those who rely on assistive technologies.

How to fix

Ensure radio buttons are keyboard operable by using native <input type="radio"> elements or by adding tabindex="0" to custom radio elements along with proper keyboard event handlers. Radio buttons should be selectable using the Tab key to navigate and Space key to select.

<!-- Native radio buttons are automatically keyboard accessible -->
<input type="radio" id="option1" name="group">
<label for="option1">Option 1</label>

<!-- For custom radio buttons, add keyboard support -->
<div role="radio" aria-checked="false" tabindex="0" id="custom-radio"
     onkeydown="if(event.key === ' ') { this.setAttribute('aria-checked', 'true'); event.preventDefault(); }"></div>
<label id="custom-label" for="custom-radio">Custom Option</label>

For custom radio groups, implement proper keyboard navigation using arrow keys.```