He estado leyendo la documentación del elemento <input type="radio"> de MDN . Quiero hacer botones de opción accesibles. Por lo tanto, quiero que un usuario pueda tabular a través de cada botón de opción, y cuando presione la barra space o enter para activar el evento onChange y seleccionar el botón de opción.
Aquí está mi código:
<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>Pero no está funcionando. Puedo enfocar el elemento, pero cuando presiono Enter o Space no sucede nada.
No deberías hacer esto. Si ya está utilizando elementos de entrada nativos, ¡está bien!
El malentendido aquí es sobre cómo seleccionar los botones de radio por medio del teclado: son las teclas de flecha .
Los usuarios pueden saltar de un grupo de botones de opción (con el mismo nombre) al siguiente mediante Tab . La selección de un botón de opción del grupo se realiza mediante las teclas de flecha.
Por supuesto, no puede anular la selección de un botón de opción. Pero si el primero recibe el foco y ninguno está marcado todavía, puede marcarlo con Espacio y Entrar .
Ver interacción de teclado para radiogroup en MDN
Ya envolviste al grupo dentro de un <fieldset> con <legend> , ¡lo cual es genial! Tiene etiquetas asociadas con los botones de opción. ¡Parece que ya está todo listo!
Adelante, pruébalo:
<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>No tengo suficiente representante para simplemente agregar un comentario, pero ¿ha intentado cambiar tabIndex={0} a tabIndex="0"?
Encontré esto aquí: https://webdesign.tutsplus.com/articles/keyboard-accessibility-tips-using-html-and-css--cms-31966
Si necesita usar una etiqueta HTML no enfocable para un elemento interactivo por algún motivo, puede hacer que sea enfocable con el atributo tabindex="0". Por ejemplo, aquí hay un botón convertido en un botón enfocable:
<div role="button" tabindex="0"> Click me </div>El atributo role="button" en el fragmento anterior es un rol de referencia de ARIA. Aunque los usuarios de solo teclado no lo necesitan, es indispensable para los usuarios de lectores de pantalla y accesibilidad visual.