Usa botones que funcionan con teclado

La idea clave

Un botón HTML real ya sabe responder a ratón, Enter y Espacio cuando tiene el foco. Usarlo es más accesible que poner un clic sobre un div que parece un botón.

Ejemplo paso a paso

Este ejemplo muestra la idea en acción. Sigue los pasos y después cámbialo tú.

document.querySelector('#accion').addEventListener('click', () => {
  document.querySelector('#saludo').textContent = 'Acción realizada';
});

Editar y probar este mismo ejemplo ↓

1. HTML utiliza un elemento button y no un div.
2. addEventListener escucha su activación, incluida la que produce el teclado.
3. El texto cambia sin que necesitemos programar teclas especiales.

Practica con código

Antes de empezar, piensa: ¿Necesitas añadir un listener de teclado a un botón real?

Comprueba que el botón muestra «Acción realizada». Después utiliza Tab, Enter y Espacio en la vista previa para confirmar que también responde al teclado.